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FOREWORD 


Dh 加 


随 着 时 代 的 发 展 ， 一 个 统一 的 互联 网 通用 标准 显得 尤其 重要 。 
HTML 5 的 出 现 引 起 了 越 来 越 多 程序 开发 爱好 者 的 关注 , 它 不 仅仅 是 
一 次 技术 的 简单 升级 ， 更 代表 了 未 来 Web 开发 的 方向 ， 被 寄予 了 太 
多 的 期 望 和 依托 。 

HTML 5 添加 了 许多 新 的 特征 和 功能 , 许多 新 增加 的 API 或 元 素 
属性 需要 借助 相关 的 书籍 来 引导 开发 使 读者 进行 学 习 并 快速 掌握 
HTML 5。 本 书 废除 了 许多 HTML 4 中 不 合理 的 效果 标记 ， 创 造 性 地 
增加 了 很 多 新 标记 (如 多 媒体 、 绘 图 和 文件 上 传 等 );， 最 大 限度 地 减 
少 了 对 外 部 插件 的 依赖 ; 同时 通过 对 本 地 离线 存储 方式 的 优化 , 使 用 
HTML 5 更 加 有 利于 移动 客户 端的 发 展 。 

HTML 5 与 样式 是 分 不 开 的 , 本 书 除了 介绍 HTML 5 的 相关 知识 
外 ， 还 介绍 CSS 3 中 新 增加 的 选择 器 和 属性 等 内 容 。 古 人 言 :“ 临 渊 
羡 鱼 ， 不 如 退 而 结 网 ” 每 一 位 从 事 Web 应 用 开发 的 工程 师 都 有 理由 
学 习 新 的 知识 并 掌握 这 本 书 中 的 技术 。 


本 书 内 容 


全 书 共 分 13 章 ， 主 要 内 容 如 下 。 

第 1 章 HTML 5 入 门 基 础 。 本 章 主要 介绍 了 HTML 5 的 发 展 、 
目标 、 基 本 结构 以 及 与 HTML 4 的 区 别 等 内 容 。 

第 2 章 HTML 5 的 页 面 属性 和 元 素 。 本 章 详细 介绍 HTML 5 中 
新 增加 的 常用 元 素 属性 (如 hidden、spellcheck、contenteditable 和 
draggable 等 ) 及 新 增加 的 元 素 (如 header、footer、article、mark 和 
cite 等 )。 

第 3 章 使 用 HTML 5 设计 表单 。 本 章 将 详细 介绍 HTML 5 在 
表单 元 素 中 新 增加 的 输入 类 型 、 属 性 、 元 素 及 如 何在 提交 时 进行 验证 
等 内 容 。 输 入 类 型 如 email、search、url、number 等 ， 表 单 属性 如 
autofocus、autocomplete、multiple 和 pattern 等 。 

第 4 章 基于 HIML 5 的 多 媒体 支持 。 本 章 介绍 HTML 5 中 新 
增加 的 多 媒体 元 素 : audio 和 video。 主要 包括 这 两 个 元 素 的 属性 、 方 
法 、 事 件 以 及 如 何 使 用 等 内 容 。 

第 5 章 基于 HIML 5 的 绘图 .本 章 将 详细 介绍 如 何 使 用 HIML 
5 中 新 增加 的 canvas 元 素 及 canvas API 实 现 简单 的 绘图 , 如 绘制 圆 形 、 
绘制 渐变 图 形 、 组 合 多 个 图 形 及 对 图 像 进 行 简单 操作 等 。 

第 6 章 基于 HTML 5 的 文件 上 传 。 本 章 介绍 如 何在 HIML 5 


中 实现 文件 上 传 和 读 取 的 功能 ， 包 括 一 个 或 多 个 文件 的 上 传 、 使 用 FileReader 接口 读 取 文 
件 及 读 取 时 的 错误 与 异常 等 内 容 。 

第 7 章 HTML 5 数据 存储 。 本 章 介绍 如 何 使 用 HIML 5 中 新 增加 的 localStorage 对 象 
和 sessionStorage 对 象 存储 数据 。 

第 8 章 HTML 5 的 高 级 应 用 。 本 章 介 绍 HIML 5 中 的 高 级 技术 ， 包 括 如 何 获取 用 户 
地 理 位 置 、 网 络 通信 API、Web Worker、 离 线 应 用 程序 以 及 拖 放 操 作 等 内 容 。 

第 9 章 CSS 样式 与 CSS 选择 器 。 本 章 介 绍 了 CSS 的 相关 知识 ， 包 括 发 展 历史 和 基 
本 使 用 。 另 外 也 详细 介绍 了 CSS 3 中 新 增加 的 选择 器 ， 包 括 属 性 选择 器 、 伪 元 素 选 择 器 和 
结构 化 伪 类 选择 器 等 。 

第 10 章 背景、 边框 和 渐变 的 相关 属性 。 本 章 将 详细 介绍 CSS 3 中 新 增加 的 与 背景 、 
边框 和 渐变 有 关 的 属性 。 

第 11 章 盒 模型 。 本 章 介绍 盒 模型 的 相关 属性 ， 除 此 之 外 也 详细 介绍 了 文本 、 字 体 及 
多 列 布局 等 内 容 的 新 增 属性 。 

第 12 章 CSS 3 的 高 级 应 用 。 本 章 将 详细 介绍 CSS 3 中 的 高 级 应 用 , 包括 实现 元 素 的 
过 渡 、 变 形 及 动画 效果 的 相关 属性 等 。 

第 13 章 制作 鲜花 网 站 。 本 章 通过 一 个 综合 案例 主要 将 HTML 5 与 CSS 3 结合 ， 实 
现 了 鲜花 网 站 的 设计 效果 ， 包 括 鲜花 首页 、 鲜 花 列表 、 详 细 信息 查看 、 购 物 车 、 用 户 注册 
以 及 当前 地 理 位 置 查看 等 页 面 。 


本 书 特 色 


本 书 采 用 大 量 的 实例 进行 讲解 ， 力 求 通过 实际 操作 使 读者 更 容易 地 使 用 HTML 5 和 
CSS 3 设计 网 页 程序 。 本 书 难度 适中 ， 内 容 由 浅 入 深 ， 实 用 性 强 ， 履 盖 面 广 ， 条 理 清 晰 。 

口 ”知识 点 全 ”本 书 紧 紧 围 绕 HITML 5 和 CSS 3 的 网 站 设计 展开 讲解 ， 具 有 很 强 的 遇 
辑 性 和 系统 性 。 

口 实例 丰富 书 中 各 实例 均 经 过 作者 精心 设计 和 挑选 ， 它 们 都 是 根据 作者 在 实际 开 
发 中 的 经 验 总 结 而 来 ， 涵 盖 了 在 实际 开发 中 所 遇 到 的 各 种 问题 。 

口 “应 用 广泛 “对 于 精 选 案例 给 了 详细 步骤 ， 结 构 清 晰 简明 ， 分 析 深入 浅 出 ， 而 且 有 
些 程序 能 够 直接 在 项 目 中 使 有 用， 避免 读 者 进行 二 次 开发 。 

口 ”基于 理论 ， 注 重 实践 ”讲述 过 程 不 仅仅 介绍 理论 知识 ， 而 且 在 合适 位 置 安排 综合 
应 用 实例 或 者 小 型 应 用 程序 ， 将 理论 应 用 到 实践 当中 ， 以 此 来 加 强 读者 的 实际 应 
用 能 力 ， 巩 国 开 发 基础 和 知识 。 

口 随 书 光盘 本 书 为 实例 配备 了 视频 教学 文件 ， 读 者 可 以 通过 视频 文件 更 加 直观 地 
学 习 HTML5 和 CSS 3 的 使 用 知识 。 

口 ”网 站 技术 支持 ”读者 在 学 习 或 者 工作 的 过 程 中 ， 如 果 遇 到 实际 问题 ， 可 以 直接 登 
录 www.itzcn.com 与 我 们 取得 联系 ， 作 者 会 在 第 一 时 间 内 给 予 帮 助 。 

口 ”贴心 的 提示 “为 了 便于 读者 阅读 ， 全 书 还 穿插 着 一 些 技巧 、 提 示 等 小 贴 士 ， 体 例 
约定 如 下 : 


提示 : 通常 是 一 些 贴心 的 提醒 ， 让 读者 加 深 印 象 或 提供 建议 ， 或 者 提示 解决 问题 的 
方法 。 

注意 : 提出 学 习 过 程 中 需要 特别 注意 的 一 些 知识 点 和 内 容 ， 或 者 相关 信息 。 

技巧 : 通过 简短 的 文字 ， 指 出 知识 点 在 应 用 时 的 一 些小 窍门 。 


读者 对 象 


本 书 具 有 知识 全 面 、 实 例 精 彩 、 指 导 性 强 的 特点 ， 力 求 以 全 面 的 知识 性 及 丰富 的 实例 
来 指导 读者 透彻 地 学 习 HIML 5 和 CSS 3 设计 网 页 各 方面 的 知识 。 

口 HTML5 和 CSS 3 初学 者 以 及 在 校 学 生 。 

口 各 大 中 专 院 校 的 在 校 学 生 和 相关 授课 老师 。 

口 ”准备 从 事 软件 开发 的 人 员 。 

口 ”其 他 从 事 HTML 5 和 CSS 3 网 站 开发 或 应 用 程序 开发 技术 的 人 员 。 

除了 封面 署名 人 员 之 外 ， 参 与 本 书 编写 的 人 员 还 有 马 海军 、 李 海 庆 、 陶 丽 、 王 号 梅 、 
康 显 丽 、 孝 军 启 、 朱 俊 成 、 宋 强 、 孙 洪 叶 、 右 江涛 、 张 东平 、 吴 鹏 、 王 新 伟 、 刘 青 凤 、 汤 
莉 、 费 明 、 王 超 英 、 王 丹 花 、 闫 下 、 张 丽 莉 、 李 卫 平 、 王 慧 、 牛 红 惠 、 丁 国庆 、 黄 锦 刚 、 
李 施 、 王 中 行 、 李 志 国 等 。 在 编写 过 程 中 难免 会 有 漏洞 ， 欢 迎 读 者 通过 我 们 的 网 站 
wwwitzcn.com 与 我 们 联系 ， 帮 助 我 们 改正 提高 。 
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HTMLS 入 门 基础 
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随 着 时 代 的 发 展 ， 统 一 的 互联 网 通用 标准 显得 尤为 重要 。 在 HTML 5 之 前 ， 由 于 各 个 
浏览 器 之 间 的 标准 不 统一 ，Web 浏览 器 之 间 由 于 兼容 性 而 引起 的 BUG 浪费 了 大 量 时 间 。 
而 HTML 5 的 目标 就 是 将 Web 带 入 一 个 成 熟 的 应 用 平台 , 在 HTML 5 平台 上 , 视频 、 音频、 
图 像 、 动 画 ， 以 及 同 电脑 的 交互 都 被 标准 化 。 自 从 2010 年 HTML 5 正式 推出 以 来 ， 它 以 

-种 惊人 的 速度 被 迅速 推广 ， 本 章 主要 介绍 HTML 5 的 新 特性 ， 包 括 与 HIML 4 相 比较 的 
优势 以 及 浏览 器 支持 情况 。 

本 章 学 习 要 点 : 

了 解 HTML 的 发 展 史 

熟练 掌握 HTML 的 基本 结构 

掌握 HTML 5 较 HIML 4 新 增 的 元 素 和 废除 的 元 素 
掌握 HTML 5 较 HTML 4 新 增 的 属性 和 废除 的 属性 
掌握 HTML 5 中 的 全 局 属性 

了 解 Flash、Sliverlight 与 HTML 5 的 区 别 

了 解 HTML 5 的 目标 

掌握 HTML 5 的 浏览 器 支持 情况 


v 
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1.1 HTML 5 概述 


Internet 的 飞速 发 展 使 创建 的 网 站 越 来 越 多 ， 当 人 们 浏览 这 些 网 站 的 时 候 , 看 到 的 是 丰 
富 的 影像 、 文 字 、 图 片 …… 这 些 内 容 都 是 通过 一 个 名 为 HTML 的 语言 表现 出 来 的 。HTML 
5 将 成 为 HTML、XHTML 以 及 HTML DOM 的 新 标准 ， 它 是 W3C 与 WHATWG 合作 的 结 
果 ， 其 中 ，W3C 专注 于 XHTML 2.0，WHATWG 致力 于 Web 表单 和 应 用 程序 。 


1.1.1 HTML 5 的 诞生 


HTML 的 历史 可 以 追溯 到 20 世纪 90 年 代 初 。1993 年 HTML 首次 以 因特网 草案 的 形 
式 发 布 。20 世纪 90 年 代 见 证 了 HTML 的 快速 发 展 ， 从 2.0 版 到 3.2 版 、4.0 版 ， 再 到 1999 
年 的 4.01 版 。 随 着 HTML 的 发 展 ，W3C (万 维 网 联盟 ) 掌握 了 对 HIML 规范 的 控制 权 。 

然而 ， 在 快速 发 布 了 这 4 个 版 本 之 后 ， 业 界 普遍 认为 HIML 已 经 “无 路 可 走 ” 了 ， 对 
Web 标准 的 焦点 开始 转移 到 了 XML 和 XHTML 上 ，HTML 被 放 在 次 要 的 位 置 。 不 过 在 此 


期 间 ，HTML 体现 出 了 顽强 的 生命 力 ， 主 要 的 网 站 内 容 还 是 基于 HTML 的 。 为 了 能 支持 新 
的 Web 应 用 ， 同 时 克服 现 有 的 缺点 ，HTML 迫切 需要 添加 新 的 功能 ， 制 定 新 的 规范 。 

致力 于 将 Web 平台 提升 到 一 个 新 的 高 度 ， 一 些 人 在 2004 年 成 立 了 WHATWG (Web 
超 文本 应 用 技术 工作 组 )。 他 们 创立 了 HTML 5 规范 ， 同 时 开始 专门 针对 Web 应 用 开发 新 
功能 ， 这 被 WHATWG 认为 是 HTML 中 最 薄弱 的 环节 。Web 2.0 这 个 新 词 也 就 是 在 那个 时 
候 发 明 的 。Web 2.0 不 负 众望 ， 开 创 了 Web 的 第 二 个 时 代 ， 旧 的 静态 网 站 逐渐 让 位 于 需要 
更 多 特性 的 动态 网 站 和 社交 网 站 ， 这 其 中 的 新 功能 数不胜数 。 

2006 年 ，W3C 又 重新 介入 HTML， 并 于 2008 年 发 布 了 HTML 5 的 工作 草案 。2009 
年 ，XHTML 2 工作 组 停止 工作 。 因 为 HIML 5 能 解决 非常 实际 的 问题 ， 所 以 在 规范 还 没 
有 具体 确定 的 情况 下 ， 各 大 浏览 器 开发 者 开始 对 旗下 产品 进行 升级 ， 以 支持 HIML 5 的 新 
功能 。 这 样 ， 得 益 于 浏览 器 的 实验 性 反馈 ，HTML 5 规范 也 得 到 了 持续 的 完善 ，HTML 5 
迅速 融入 到 对 Web 平台 的 实质 性 改进 中 。 


1.1.2 HTML 5 的 组 织 


为 了 推动 Web 标准 化 运动 的 发 展 ， 一 些 公司 联合 起 来 , 成 立 了 一 个 叫做 WHATWG 的 
组 织 ,HTML 5 草案 的 前 身 名 为 Web Applications 1.0, 于 2004 年 被 WHATWG 提出 ,于 2007 
年 被 W3C 接纳 ， 并 成 立 了 新 的 HTML 工作 团队 。HTML 5 的 第 一 份 正 式 草案 已 于 2008 年 
1 月 22 日 公布 。 下 面 对 这 些 组 织 进行 简单 的 介绍 。 

口 WHATWG 

WHATWG 的 全 称 是 Web Hypertext Application Technology Working Group， 表 示 Web 
超 文 本 应 用 技术 工作 组 。WHATWG 是 一 个 以 推动 网 络 HTML 5 标准 为 目的 而 成 立 的 工作 
小 组 ， 成 立 于 2004 年 ， 最 初 的 成 员 包 括 Apple、Mozilla、Google 和 Opera 等 浏览 器 厂商 。 

口 W3c 

W3C 的 全 称 是 World Wide Web Consortium, 即 万 维 网 联盟 , 又 称 W3C 理事 会 .于 1994 
FE 10 月 在 麻 省 理工 学 院 科学 实验 室 成 立 。 

为 解决 Web 应 用 中 不 同 平台 、 技 术 和 开发 者 带 来 的 不 兼容 问题 ， 保 障 Web 信息 的 顺 
利和 完整 流通 , 万维网 联盟 制定 了 一 系列 标准 ， 并 督促 Web 应 用 开发 者 和 内 容 提供 者 遵循 
这 些 标准 。 标准 的 内 容 包 括 使 用 语言 的 规范 、 开 发 中 使 用 的 导 则 和 解释 引擎 的 行为 等 。W3C 
也 制定 了 包括 XML 和 CSS 等 众多 影响 深远 的 标准 规范 。 

口 IETF 

IETF 的 全 称 是 Intermet Engineering Task Force， 表 示 互 联网 工程 任务 组 。IETF 的 主要 
任务 是 负责 互联 网 相关 技术 规范 的 研发 和 制定 ， 当 前 绝 大 多 数 国 际 互联 网 技术 标准 出 自 
IETF。HTML 5 中 定义 的 各 种 API (线程 、Socket、 离 线 ) 均 由 IETF 组 织 开发 。 


上 


1.1.3 HTML 5 的 目标 


HTML 5 的 目标 是 能 够 创建 更 简单 的 Web 程序 , 编写 更 简洁 的 HTML 代码 。 例 如 ， 为 
了 更 容易 地 开发 Web 应 用 程序 ，HTML 5 提供 了 很 多 API; 为 了 使 HIML 变 得 更 简洁 ， 


HTML 5 开发 了 很 多 新 的 属性 、 新 的 元 素 和 标签 等 。 总 体 来 说 ，HTML 5 的 目标 有 3 个 : 
跨 浏览 嚣 支持、 文档 结构 明确 和 实现 更 丰富 、 基 于 标准 的 Web 程序 。 


Web 浏览 器 之 间 的 兼容 性 其 实 是 非常 低 的 。 在 某 个 Web 浏览 器 上 可 以 正常 运行 的 
HTMIL/CSS/JavaScript 等 Web 程序 ， 在 另 一 个 Web 浏览 器 上 却 未 必 能 够 正常 运行 ， 这 个 问 
题 的 最 主要 原因 就 是 规范 不 统一 ， 没 有 被 标准 化 。 

在 HIML 5 中 ， 这 个 问题 将 得 到 解决 。 HTML 5 的 使 命 是 详细 分 析 各 Web 浏览 器 所 具 
有 的 功能 ， 然 后 以 此 为 基础 ， 要 求 这 些 浏 览 器 所 有 内 部 功能 都 要 符合 一 个 通用 标准 。 如 果 
各 浏览 器 都 符合 通用 标准 ， 然 后 以 该 标准 为 基础 来 书写 程序 ， 那 么 程序 在 各 浏览 器 都 能 正 
常 运 行 的 可 能 性 就 大 大 提高 了 ， 这 对 于 Web 开发 者 和 Web 设计 者 来 说 都 是 一 件 可 喜 的 
事情 。 


在 之 前 的 HTML 版 本 中 文档 的 结构 不 够 清晰 、 明确。 例如 为 了 要 表示 “标题 ^ “正文 ” 
之 前 的 版 本 一 般 都 是 使 用 div 元 素 。 但 是 严格 来 说 ，<div> 不 是 一 个 能 把 文档 结构 表达 得 很 
清楚 的 元 素 ， 使 用 了 过 多 的 div 元 素 的 文档 ， 阅 读 时 不 仔细 研究 是 很 难看 出 文档 结构 的 。 
而 且 ， 对 于 搜索 引擎 或 屏幕 阅读 器 等 程序 来 说 ， 过 多 使 用 div 元 素 为 分 析 结 构 带 来 了 很 大 
的 困难 。 

为 了 解决 这 个 问题 ， 在 HTML 5 中 添加 了 很 多 跟 结构 相关 的 元 素 。 不 仅 如 此 ， 还 结 
合 了 包括 微 格式 、 无 障碍 应 用 在 内 的 各 种 各 样 的 周边 技术 。 

在 HTML4 中 常见 的 一 种 页 面 结构 代码 如 下 所 示 : 


在 HTML 5 中 代码 将 变 得 更 加 简洁 并 且 结 构 明 确 ， 如 下 所 示 : 


从 上 述 两 段 代码 可 以 看 出 , 在 HTML 4 中 常见 的 实用 div 元 素来 划分 页 面 结构 的 方法 ， 
在 HIML 5 中 却 被 新 出 现 的 标签 所 代替 ， 使 得 文档 结构 更 加 的 清晰 、 明 确 。 


站 3 实现 更 丰富 、 基 于 标准 的 Web 程序 “] 


世人 最 迫切 期 待 的 HTML 5 新 增 方面 是 新 的 元 素 和 API， 使 网 页 制作 者 只 要 使 用 基于 


标准 的 HTML， 就 能 制作 丰富 的 多 媒体 内 容 。 现 代 网 页 越 来 越 多 地 采用 可 扩展 图 形 、 动 画 
和 多 媒体 ， 但 到 目前 为 止 ， 这些 功 能 要 求 使 用 Flash、RealMedia 和 QuikTime 等 专 有 插件 。 
这 类 插件 不 但 带 来 了 新 的 安全 风险 ， 还 限制 了 网 页 的 受众 面 。 

HTML 5 解决 这 个 问题 的 办 法 是 使 浏览 器 支持 相关 的 标记 语言 ， 网 页 制作 者 可 以 将 使 
用 MathML 和 SVG 编写 的 标记 直接 嵌入 到 HIML 5 页 面 中 。 这 种 灵活 性 的 跨 平台 设计 比 
既 要 支持 图 形 又 要 兼顾 文本 的 Flash 和 Silverlight 等 更 有 竞争 力 。 

不 过 ，Web 开发 人 员 对 HTML 5 新 的 音频 和 视频 标签 的 呼声 更 高 ， 这 些 标签 的 最 终 目 
的 是 要 很 容易 地 将 多 媒体 内 容 嵌 入 到 页 面 中 。 这 些 标签 在 HTML 5 标准 中 要 求 与 编 解码 器 
无 关 ， 这 意味 着 将 由 浏览 器 厂商 负责 提供 能 播放 任何 内 容 所 需 的 编 解 码 器 ， 只 要 符合 一 定 
标准 即 可 。 其 中 ， 视 频 标签 被 寄予 厚望 ， 因 为 对 网 上 视频 提供 商 来 说 ， 它 们 希望 自己 的 内 
容 可 以 在 iPhone 和 iPad 上 播放 ， 而 这 两 款 设备 目前 都 不 支持 Flash。 

画布 标签 让 交互 式 Web 图 形 向 前 迈进 了 一 步 , 该 标签 可 用 来 把 浏览 器 窗口 的 某 些 区 域 
定义 为 动态 位 图 。Web 开发 人 员 可 使 用 JavaScript 来 处 理 画 布 中 的 内 容 ， 针 对 用 户 操 作 实 
时 泻 染 图 形 。 从 理论 上 来 说 ， 这 项 技术 有 望 使 开发 人 员 只 是 用 JavaScript 和 HTML 就 能 开 
发 出 完全 交互 的 游戏 。 

除了 这 些 显示 技术 之 外 ，HTML 5 还 引入 了 基于 浏览 器 的 缓存 概念 ， 缓 存 让 Web 应 用 
可 以 把 信息 存储 在 客户 端 设备 上 。 与 谷歌 Gears 插件 一 样 ， 这 些 缓存 既 提 升 了 应 用 性 能 ， 
又 可 以 让 用 户 即 便 无 法 连接 互联 网 ， 也 能 继续 使 用 Web 应 用 。 实 际 上 ， 和 谷歌 已 经 逐步 停止 
支持 Gears， 改 而 支持 HTML 5 技术 。 


1.1.4 HTML 5 的 浏览 器 支持 情况 


现今 浏览 器 的 许多 新 功能 都 是 从 HIML 5 标准 中 发 展 而 来 的 。 无 论 HIML 5 发 生 了 哪 
些 巨大 的 变化 ， 提 供 了 哪些 革命 性 的 特性 ， 如 果 不 能 被 业界 承认 并 广泛 地 推广 使 用 ， 这 些 
都 是 没有 意义 的 。 

然而 ,现在 HIML 5 被 正式 地 、 大 规模 地 投入 应 用 的 可 能 性 是 相当 高 的 ,通过 对 Intermet 
Explore、Google、Firefox、Safari、Opera 等 主要 的 Web 浏览 器 的 发 展 策略 的 调查 ， 发 现 它 
们 都 在 支持 HTML 5 上 采取 了 措施 。 

口 微软 

2010 年 3 月 16 日 微软 于 MIX10 技术 大 会 上 宣布 , 其 推出 的 Intemet Explorer 9 浏览 器 
已 经 支持 HTML 5， 同 时 还 声称 随后 将 更 多 地 支持 HTML 5 的 新 标准 和 CSS 3 特性 。 

DD Google 

2010 年 2 月 19 日 ， 谷 歌 Gears 项 目 经 理 伊 安 。 费 特 通过 博客 宣布 ， 谷 歌 将 放弃 对 
Gears 浏览 器 插件 项 目的 支持 ， 并 重点 开发 HTML 5 项 目 。 据 费 特 表示 ， 目 前 在 谷歌 看 来 ， 
Gears 面临 的 主要 问题 是 ， 该 应 用 与 HIML 5 的 诸多 创新 非常 相似 ， 而 且 谷 歌 一 直 积 极 发 
展 HIML 5 项 目 。 因 此 ， 只 要 谷歌 不 断 以 加 强 新 网 络 标准 的 应 用 功能 为 工作 重点 ， 那 么 为 
Gears 增加 新 功能 就 无 太 大 意义 了 。 目 前 ， 多 种 浏览 器 将 会 越 来 越 多 地 为 GMail 及 其 他 服 
务 提供 更 多 脱 机 功能 方面 的 支持 ， 因 此 Gears 面临 的 需求 也 在 日 益 下 降 ， 这 是 谷歌 做 出 上 
述 调整 的 重要 原因 。 


口 Apple 

2010 年 6 月 7 日 Apple 在 开发 者 大 会 的 会 后 发 布 了 Safari 5， 这 款 浏 览 器 支持 10 个 以 
上 的 HTML 5 新 技术 ,包括 全 屏幕 播放 、HTML 5 视频 、HTML 5 地 理 位 置 、HTML 5 切片 
元 素 、HTML 5 的 可 拖 动 属性 、HTML 5 的 形式 验证 、HTML 5 的 Ruby、HTML 5 的 Ajax 
历史 和 WebSocket 字幕 。 


DD “Opera 

2010 年 5 月 5 日 Opera 软件 公司 首席 技术 官 (CSS 之 父 ) 发 表 了 关于 HTML 5 的 看 法 ， 
称 HTML5 和 CSS 3 将 是 全 球 互联 网 发 展 的 未 来 趋势 ， 目 前 包括 Opera 在 内 的 诸多 浏览 器 
厂商 ， 纷 纷 研发 HTML 5 的 相关 产品 ，Web 的 未 来 属于 HIML 5。 

口 “ Mozilla 

2010 年 7 月 Mozilla 基金 会 发 布 了 即将 推出 的 Firefox 4 浏览 器 的 第 一 个 早期 测试 版 。 
该 版 本 中 的 Firefox 浏览 器 进行 了 大 幅 改 进 , 包括 新 的 HTML 5 语法 分 析 器 , 以 及 支持 更 多 
HTML 5 形式 的 控制 等 。 从 官方 文档 来 看 ，Firefox 4 对 HTML 5 是 完全 级 别 的 支持 。 目 前 
包括 在 线 视频 、 在 线 音 频 在 内 的 多 种 应 用 都 已 在 该 版 中 实现 。 

以 上 证 据 表明 ， 目 前 这 些 浏 览 器 纷纷 朝 着 支持 HIML 5、 结 合 HTML 5 的 方向 迈进 ， 
因此 HTML 5 已 经 被 广泛 地 推行 开 来 ， 相 信 HTML 5 的 应 用 会 越 来 越 多 。 


1.2 HTML 的 基本 结构 


完整 的 HTML 文件 至 少 包括 <html> 标 签 、<head> 标 签 、<title> 标 签 和 <body> 标 签 ， 并 
且 这 些 标准 都 成 对 出 现 ， 开 头 标 签 为 二 ， 结 束 标签 为 <>， 在 这 两 个 标签 之 间 添 加 内 容 。 
通过 这 些 标签 中 的 相关 属性 可 以 设置 页 面 的 背景 色 、 背 景 图 像 等 。 


1.2.1 HTML 文档 的 编写 规范 


HTML 文档 是 由 一 系列 的 元 素 和 标签 组 成 的 。 其 中 , 元 素 是 HTML 文档 的 重要 组 成 部 
分 ， 如 title (文档 标题 )、img (图 像 ) 及 table (表格 ) 等 ， 元 素 名 不 区 分 大 小 写 ， 标 签 用 
于 规定 元 素 的 属性 和 它 在 文档 中 的 位 置 。 


HTML 标签 分 为 成 对 标签 和 单独 标签 两 种 。 大 多 数 标签 成 对 出 现 ， 它 是 由 首 标签 和 尾 
标签 组 成 的 。 首 标签 的 格式 为 “< 元 素 名 称 >”， 尾 标签 的 格式 为 “</ 元 素 名 称 >”， 其 完整 
语法 格式 如 下 所 示 : 


成 对 标签 仅 对 包含 在 其 中 的 文档 部 分 发 生 作用 ， 如 <title> 和 </title> 标 签 用 于 界定 标题 
元 素 的 范围 ， 也 就 是 说 ，<title> 和 </title> 标 签 之 间 的 部 分 是 此 HTML 文档 的 标题 。 
单独 标签 的 格式 为 “< 元 素 名称 >”， 其 作用 是 在 相应 的 位 置 插入 元 素 ， 如 <br> 标 签 便 


是 在 该 标签 所 在 位 置 插入 一 个 换行 符 。 


全 


在 每 个 HIML 标签 中 还 可 以 设置 一 些 属性 ， 来 控制 HTML 标签 所 建立 的 元 素 。 这 些 
属性 将 位 于 所 建立 元 素 的 首 标签 中 ， 其 基本 语法 格式 如 下 所 示 : 


每 个 HTML 标签 不 区 分 大 小 写 ， 如 <HTML>、<html> 和 <Html>， | 
一 样 的 。 


因此 ， 在 HTML 文档 中 某 个 元 素 的 完整 定义 语法 如 下 所 示 : 


当 用 一 组 HTML 标签 将 一 段 文字 包含 在 中 间 时 ， 这 段 文档 与 包含 文字 的 HTML 标签 
被 称 为 一 个 元 素 。 在 HTML 语法 中 每 个 由 HTML 标签 与 文档 所 形成 的 元 素 内 ， 还 可 以 包 
含 另 一 个 元 素 。 因 此 整个 HTML 文档 就 像 是 一 个 大 元 素 包含 了 许多 小 元 素 。 

在 所 有 的 HTML 文档 中 ， 最 外 层 的 元 素 是 由 <html> 标 签 建立 的 。 在 <html> 标 签 所 建立 
的 元 素 中 包含 了 两 个 主要 的 子 元 素 ， 这 两 个 子 元 素 是 由 <head> 标 签 与 <body> 标 签 所 建立 
的 。<head> 标 签 所 建立 的 元 素 的 内 容 为 文本 标题 ， 而 <body> 标 签 所 建立 的 元 素 内 容 为 文本 
主体 。 


HTML 文档 主要 由 3 部 分 组 成 : 开始 标签 <html>、 头 部 标签 <head> 和 主体 标签 <body>。 
下 面 使 用 Adobe Dreamweaver 编 写 一 个 简单 的 HIML 文档 ,观察 其 在 浏览 器 上 的 显示 结果 。 
有 具体 代码 如 下 所 示 : 


在 上 述 代码 中 <head> 与 </head> 标 签 之 间 的 部 分 是 HTML 文档 的 头 部 ， 用 以 说 明文 档 
的 标题 和 整个 文档 的 一 些 公共 属性 ，<body> 与 <body> 标 签 之 问 的 部 分 是 HTML 文档 的 主 
体 部 分 ， 用 以 设置 页 面 要 显示 的 内 容 。 

运行 该 页 面 ， 效 果 如 图 1-1 所 示 。 


1.2.2 文档 开始 标签 


文档 开始 标签 以 <html> 标 签 开始 ， 以 </html> 标 签 结 束 ， 用 于 表示 该 文档 是 以 超 文本 标 
记 语 言 (HTML) 编写 的 。 其 语法 格式 如 下 所 示 : 


在 任何 一 个 HTML 文档 中 最 先 出 现 的 HTML 标签 就 是 <html>， 它 是 成 对 出 现 的 ， 首 
标签 <html> 和 尾 标 签 </html> 分 别 位 于 文档 的 开始 和 结尾 处 ， 文 档 中 的 所 有 HTML 标签 都 
包含 在 该 标签 中 。 


事实 上 ， 现 在 常用 的 Web 浏览 器 〈 如 正 ) 都 可 以 自动 识别 HTML 文档 ， 并 不 要 求 有 
<html> 标 签 , 也 不 对 该 标签 进行 任何 操作 。 但 是 , 为 了 提高 文档 的 适用 性 , 使 编写 的 HTML 
文档 能 适应 不 断 变化 的 Web 浏览 器 ， 应 当 养 成 使 用 这 个 标签 的 习惯 。 


1.2.3 ”文档 头 部 标签 


文档 头 部 标签 以 <head> 标 签 开始 ， 以 </head> 标 签 结 束 ， 用 于 规定 该 文档 的 标题 (出现 
在 Web 浏览 器 窗口 的 标题 栏 中 ) 和 一 些 属性 。 标 题 包含 在 <title> 和 </title> 标 签 之 间 ， 其 语 
法 格式 如 下 所 示 : 


<head> 是 一 个 标识 网 页 头 部 的 标签 。 在 由 <head> 标 签 所 定义 的 元 素 中 ， 并 不 放置 网 页 
的 任何 内 容 ， 而 是 放置 关于 HTML 文档 的 信息 ， 也 就 是 说 ， 它 并 不 属于 HTML 文档 的 主 
体 ， 它 包含 文档 的 标题 、 编 码 方式 及 URL 等 信息 ， 这 些 信息 大 部 分 用 来 提供 索引 、 辨 认 或 
其 他 方面 的 应 用 。 

每 个 HTML 文档 都 需要 有 一 个 文档 名 称 。 在 浏览 器 中 , 文档 名 称 作为 窗口 名 称 显示 在 
该 窗口 的 最 上 方 ， 这 对 浏览 器 的 收藏 功能 很 有 用 。 如 果 浏 览 者 需要 收藏 某 个 网 页 ， 可 以 单 
击 浏览 器 工具 栏 中 的 【收藏 】 按 钮 ， 即 可 将 该 网 页 添加 到 收藏 夹 。HTML 文档 的 标题 要 写 
在 <title> 与 </title> 标 签 之 间 ， 该 组 标签 应 包含 在 <head> 与 </head> 标 签 当 中 。 


HTML 文档 的 标签 是 可 以 谋 套 的 , 即 在 一 对 标签 中 可 以 嵌入 另 一 对 子 标签 ,用 


来 规定 母 标签 所 含 范围 的 属性 或 其 中 某 一 部 分 内 容 , 谋 套 在 <head> 标 签 中 使 用 
的 主要 有 <title> 标 签 。 


1.2.4 文档 主体 标签 


文档 主体 部 分 以 <body> 标 签 开 始 ， 以 </body> 标 签 结 束 ， 用 于 设计 页 面 中 要 显示 的 文 
本 、 图 像 和 链接 。 其 语法 格式 如 下 所 示 : 


<body> 标 签 是 成 对 出 现 的 ， 网 页 中 的 主体 内 容 应 该 写 在 <body> 与 </body> 之 间 ， 而 
<body> 标 签 包含 在 <html> 与 </html> 标 签 之 间 。 


1.2.5 ”编写 文档 的 注意 事项 


在 编写 HIML 文档 时 ， 要 注意 以 下 事项 。 

(1)“<” 和 “>” 分 别 是 任何 标签 的 开始 和 结束 标记 ， 元 素 的 标签 要 用 这 对 尖 括 号 括 
起 来 ， 并 且 结 束 的 标签 总 是 在 开始 的 标签 前 加 一 个 斜 杠 “/”。 

(2) 标签 与 标签 之 间 可 以 嵌 套 ， 如 下 所 示 : 


ee 


(3) HTML 元 素 不 区 分 大 小 写 ， 如 下 几 种 写法 都 是 正确 并 且 相 同 的 标签 


(4) 任何 回 车 和 空格 在 HTML 代码 中 都 不 起 作用 。 为 了 代码 清晰 ， 建 议 不 同 的 标签 之 
回 车 后 编写 。 
(5) HTML 标签 中 可 以 放置 各 种 属性 ， 如 下 面 的 代码 所 示 : 


<aiv align="center"> 唐 诗 300 首 cdiv> 
其 中 ，align 为 <div> 标 签 的 属性 ，center 为 align 属性 的 值 。 


， 人 未 名 之 间 应 该 有 一 个 空格 分 害 


豆 


(6) 如 果 需 要 在 HTML 文档 代码 中 添加 注释 以 便于 阅读 理解 ， 可 以 以 “<!--” 开 始 ， 
以 “-->” 结 束 ， 如 以 下 代码 所 示 : 


注释 语句 只 出 现在 HTML 文档 代码 中 ， 而 不 会 在 浏览 器 中 显示 。 
13 HTMLS 与 HTML 4 的 区 别 


上 一 节 简 单 介绍 了 HTML 4 的 文档 结构 .HTML 5 是 以 HTML 4 为 基础 的 , 并 对 HTML 
4 进行 了 大 量 的 修改 。 本 节 将 详细 介绍 HIML 5 对 HTML 4 进行 的 修改 ， 以 及 它们 之 间 的 
区 别 。 


与 HTML 4 相 比 ，HTML 5 在 语法 上 发 生 了 很 大 的 变化 。 但 是 ，HTML 5 中 的 语法 变 


化 与 其 他 开发 语言 中 的 语法 变化 在 根本 意义 上 有 所 不 同 。 它 的 变化 是 因为 在 HTML 5 之 前 
几乎 没有 符合 标准 规范 的 Web 浏览 器 。 

HTML 的 语法 是 在 SGML (Standard Generalized Markup Language) 语言 的 基础 上 建立 
起 来 的 。 但 是 SGML 语法 非常 复杂 ， 要 开发 能 够 解析 SGML 语法 的 程序 也 很 不 容易 ， 所 
以 很 多 浏览 器 都 不 包含 SGML 的 分 析 器 。 因 此 ， 虽 然 HTML 基本 上 遵从 SGML 的 语法 ， 
但 是 对 于 HTML 的 执行 ， 各 个 浏览 器 之 间 并 没有 一 个 统一 的 标准 。 

在 这 种 情况 下 ， 各 个 浏览 器 之 间 的 相互 兼容 性 和 相互 操作 性 在 很 大 程度 上 取决 于 网 站 
或 网 络 应 用 程序 的 开发 者 们 在 开发 上 所 做 的 共同 努力 ， 而 浏览 器 本 身 始终 是 存在 缺陷 的 。 

如 上 所 述 , 在 HIML 5 中 提高 Web 浏览 器 之 间 的 兼容 性 是 它 的 一 个 很 大 的 目标 , 为 了 
确保 兼容 性 ， 就 要 有 一 个 统一 的 标准 。 因 此 ，HTML 5 就 围绕 着 这 个 Web 标准 ， 重 新 定义 
了 一 套 在 现 有 的 HTML 的 基础 上 修改 而 来 的 语法 , 使 它 运行 在 各 个 浏览 器 时 都 能 够 符合 这 
个 通用 标准 。 

接 下 来 具体 了 解 在 HTML 5 中 ， 对 语法 进行 了 哪些 改变 。 


HTMLS 中 的 标记 


HTML 5 与 HTML 4 相 比 较 ， 前 者 在 标记 方面 进行 了 一 些 修改 ， 主 要 体现 在 内 容 类 型 
(ContentType )、DOCTYPE 声明 、 指 定 字 符 编 妈 3 个 方面 。 

口 内 容 类 型 

HTML 5 的 文档 扩展 符 与 内 容 类 型 保持 不 变 ， 也 就 是 说 ， 扩 展 符 仍然 为 “.html” 或 
“htm”， 内 容 类 型 仍然 为 “text/html”。 

口 DOCTYPE 声明 

DOCTYPE 声明 是 HTML 文档 中 必 不 可 少 的 ， 它 位 于 文档 第 一 行 。 在 HTML 4 中 它 的 
声明 方法 如 下 所 示 : 


在 HTML 5 中 , 刻意 不 使 用 版 本 声明 , 一 份 文档 将 会 适用 于 所 有 版 本 的 HTML。HTML 
5 中 的 DOCTYPE 声明 方法 如 下 所 示 : 


另外 ， 当 使 用 工具 时 也 可 以 在 DOCTYPE 声明 方式 中 加 入 SYSTEM 识别 符 ， 声 明 方 
法 如 下 面 的 代码 所 示 : 


在 HTML 5 中 ， 像 这 样 的 DOCTYPE 声明 方式 是 允许 的 (不 区 分 大 小 写 ， 引 号 不 区 分 
是 单 引号 还 是 双 引 号 )。 

口 ”指定 字符 编码 

在 HTML 4 中， 使 用 meta 元 素 的 形式 指定 文件 中 的 字符 编码 如 下 所 示 : 


在 HIML 5 中 ， 可 以 使 用 对 <meta> 元 素 直 接 追 加 charset 属性 的 方式 来 指定 字符 编码 ， 
如 下 所 示 : 


两 种 方法 都 有 效 ， 可 以 继续 使 用 前 面 一 种 方式 〈 通 过 content 元 素 的 属性 来 指定 )， 但 
是 不 能 同时 混合 使 用 两 种 方式 。 在 以 前 的 网 站 代码 中 可 能 会 存在 下 面 代码 所 示 的 标记 方式 ， 
但 在 HTML 5 中 ， 这 种 字符 编码 方式 被 认为 是 错误 的 ， 这 一 点 请 注意 : 


从 HTML 5 开始 ， 文 档 的 字符 编码 推荐 使 用 UTF-8。 


HTML 5 的 语法 是 为 了 保证 与 之 前 的 HTML 语法 达到 最 大 程度 的 兼容 而 设计 的 。 例 如， 
符合 “没有 <p> 的 结束 标记 ”的 HTML 代码 随处 可 见 ，HTML 5 中 并 没有 把 这 种 情况 作为 
错误 来 处 理 ， 而 是 允许 存在 这 种 情况 ， 但 明确 地 规定 了 这 种 情况 应 该 怎么 处 理 。 

针对 这 个 问题 ， 可 以 从 元 素 标记 的 省 略 、 具 有 boolean 值 的 属性 、 引 号 的 省 略 这 儿 个 
方面 来 详细 了 解 在 HTML 5 中 是 如 何 确 保 与 之 前 版 本 的 HTML 达到 兼容 的 。 

口 可 以 省 略 标记 的 元 素 

在 HTML 5 中 ， 元 素 的 标记 可 以 省 略 。 具 体 来 说 ， 元 素 的 标记 分 为 没有 结束 标记 、 可 
以 省 略 结束 标记 和 开始 标记 与 结束 标记 全 部 可 以 省 略 3 种 类 型 。 

(1) 没有 结束 标记 的 元 素 不 允许 使 用 开始 标记 与 结束 标记 将 元 素 括 起 来 的 形式 ， 只 多 
许 使 用 “< 元 素 名 称 />” 的 形式 进行 书写 。 例 如 : area、base、br、col、command、embed、 
hr、 img、 input、 keygen、 link、 meta、 param、 source、 track、wbr。 

(2) 可 以 省 略 结束 标记 的 元 素 是 指 结束 标记 可 有 可 无 的 元 素 ， 例 如 : i、dt、dd、p、 
rt、 Irp、optgroup、option、colgroup、thead、tbody、tfoot、tr、td、th。 

(3) 可 以 省 略 全 部 标记 的 元 素 是 指 开始 标记 与 结束 标记 可 以 完全 被 省 略 ， 以 隐 式 的 方 
式 存在 。 例 如 : html、head、body、colgroup、tbody。 


在 元 素 清单 中 包含 了 很 多 HIML 5 中 的 新 元 素 , 关于 这 些 新 元 素 将 在 后 面 的 章 
节 中 做 详细 的 介绍 。 


口 具有 boolean 值 的 属性 

对 于 具有 boolean 值 的 属性 ， 例 如 disabled 与 readonly 等 ， 当 只 写 属性 名 而 不 指定 属 
性 值 ， 或 将 属性 名 设 定 为 属性 值 时 ， 表 示 属 性 值 为 tue; 如 果 需 要 将 属性 值 设 为 false， 可 
以 不 使 用 该 属性 。 

例如 ， 设 置 复 选 框 为 选 定 状态 ， 如 下 所 示 : 


口 省 略 引 号 

在 HIML 4 中 ， 指 定 属性 值 时 ， 属 性 值 既 可 以 使 用 双 引 号 ， 也 可 以 使 用 单 引 号 。 而 
HTML 5 在 此 基础 上 做 了 一 些 改进 ， 当 属性 值 不 包括 空 字符 串 、“<”“>” “=” 单 引 号 、 
双 引 号 等 字符 时 ， 属 性 两 边 的 引号 可 以 省 略 。 如 下 面 的 代码 所 示 : 


: 


通过 前 面 所 讲解 的 HTML 5 的 语法 知识 来 做 一 个 简单 的 标记 示例 , 主要 代码 如 下 所 示 : 


在 上 述 代码 中 ， 省 略 了 html 标记 、head 标记 、body 标记 ， 这 些 标记 以 隐 式 的 方式 在 
文档 结构 中 存在 。 除 此 之 外 ， 还 使 用 了 p 元 素 ， 并 省 略 了 该 元 素 的 结束 标记 ， 同 样 表示 段 
落 。 一 段 文 字 与 一 段 文字 之 间 需 要 换行 时 , 可 使 用 br 元 素 , 该 元 素 没 有 结束 标记 , 以 “<br/>” 
的 形式 应 用 于 HIML 文档 中 。 

在 浏览 器 中 访问 该 页 面 ， 运 行 结果 如 图 1-2 所 示 。 


1.3.2 ”新 增 的 元 素 和 废除 的 元 素 


与 HIML 4 相 比较 ，HTML 5 新 增 了 很 多 元 素 ， 同 时 也 废除 了 不 少 元 素 ， 本 节 将 简单 
介绍 HIML 5 中 新 增 的 元 素 和 废除 的 元 素 。 
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图 1-2 使 用 HTML 5 标记 显示 新 闻 


在 HTML 5 中 新 增 了 以 下 与 结构 相关 的 元 素 。 

口 section 该 元 素 用 于 定义 HTML 文档 中 的 节 (section、 区 段 )， 比 如 章节 、 页 眉 、 
页 脚 或 页 面 中 的 其 他 部 分 。 它 可 以 与 hl、h2、h3... 等 元 素 结合 使 用 ， 标 识 文档 
结构 。 

口 article 该 元 素 用 于 在 HTML 文档 中 定义 独立 的 内 容 ， 壁 如 博客 中 的 一 篇 文章 或 
报纸 中 的 一 篇 文章 。 

口 aside 该 元 素 用 于 定义 其 所 处 内 容 之 外 的 内 容 。 

口 header 该 元 素 用 于 定义 文档 的 标题 。 

口 hgroup 该 元 素 用 于 对 整个 页 面 或 页 面 中 一 个 内 容 区 段 (section ) 的 标题 进行 
组 合 。 

口 footer 该 元 素 用 于 定义 整个 文档 或 文档 中 一 个 内 容 区 段 (section ) 的 页 脚 。 在 典 
型 情况 下 ， 该 元 素 会 包含 创作 者 的 姓名 、 创 作 日 期 以 及 创作 者 的 联系 方式 等 信息 

口 nav 该 元 素 用 于 定义 文档 中 导航 链接 的 部 分 。 

口 figure 该 元 素 用 于 定义 一 段 独立 的 流 内 容 (如 图 像 、 图 表 、 照 片 、 代 码 等 )， 一 
般 表示 文档 主体 流 内 容 中 的 一 个 独立 单元 。 下 面 使 用 该 元 素 为 HTML 文档 定义 插 
图 的 图 像 ， 如 下 所 示 : 


<figure> 

<p> 黄 浦江 上 的 卢浦 大 桥 </p> 

<img src="shanghai lupu bridge.jpg" width="350" height="234" /> 
</figure> 


f 2. 新 增 的 其 他 元 素 ) 
除了 结构 元 素 外 ， 在 HTML 5 中 还 新 增 了 以 下 元 素 。 


口 video 该 元 素 用 于 定义 视频 ， 比 如 电影 片段 或 其 他 视频 流 。 

口 audio 该 元 素 用 于 定义 声音 ， 比 如 音乐 或 其 他 音频 流 。 

口 embed 该 元 素 用 来 插入 各 种 多 媒体 ， 格 式 可 以 是 Midi、Wav、AIFF、AU、MP3 
等 。 该 元 素 在 HTML 5 中 的 应 用 如 下 所 示 : 


口 mark 该 元 素 主要 用 来 在 视觉 上 向 用 户 呈 现 那 些 需要 突出 显示 或 高 亮 显示 的 文 
字 。mark 元 素 的 一 个 比较 典型 的 应 用 就 是 在 搜索 结果 中 向 用 户 高 亮 显示 搜索 关键 
词 。 

口 progress 该 元 素 表示 运行 中 的 进程 ， 可 以 使 用 该 元 素来 显示 JavaScript 中 耗费 时 
间 的 函数 的 进程 。 

口 meter 该 元 素 用 于 定义 度量 (单位 )， 仅 用 于 已 知 最 大 值 和 最 小 值 的 度量 。 在 使 
用 meter 元 素 时 , 必须 定义 度量 的 范围 , 既 可 以 在 元 素 的 文本 中 ,也 可 以 在 min/max 
属性 中 定义 。 

口 time 该 元 素 用 于 定义 日 期 或 时 间 ， 也 可 以 同时 表示 两 者 。 

口 ruby 该 元 素 用 于 定义 ruby 注释 ( 中文 注 音 或 字符 )。 该 元 素 由 一 个 或 多 个 字符 
(需要 一 个 解释 /发 音 ) 和 一 个 提供 该 信息 的 It 元 素 组 成 ， 还 包括 可 选 的 Ip 元 素 ， 
定义 当 浏 览 器 不 支持 “ruby” 元 素 时 显示 的 内 容 。 该 元 素 在 HIML 5 中 的 应 用 如 
下 所 示 : 


口 rt 该 元 素 用 于 定义 字符 (中 文 注音 或 字符 ) 的 解释 或 发 音 ， 经 常 与 ruby 元 素 一 
同 使 用 。 下 面 是 一 个 ruby 注释 : 


口 rp 该 元 素 在 ruby 注释 中 使 用 ， 以 定义 不 支持 ruby 元 素 的 浏览 器 所 显示 的 内 容 ， 
与 ruby 以 及 式 元 素 一 同 使 用 。 


支持 ruby 元 素 的 浏览 器 不 会 显示 Z 元 素 的 内 容 。 ] 


口 wbr 该 元 素 用 于 定义 软 换 行 , 它 与 br 元 素 的 区 别 是 : br 元素 表示 此 处 必须 换行 ; 
而 Wbr 元 素 的 意思 是 浏览 器 窗口 或 父 级 元 素 的 宽度 足够 宽 时 ( 没 必 要 换行 时 ), 不 
进行 换行 ， 而 当 宽 度 不 够 时 ， 主 动 在 此 处 进行 换行 。 wbr 元 素 对 字符 型 的 语言 作 
用 很 大 ， 但 是 对 于 中 文 没有 很 大 的 用 处 。 该 元 素 在 HIML 5 中 的 应 用 如 下 所 示 


口 canvas 该 元 素 用 于 定义 图 形 ， 比 如 图 表 或 其 他 图 像 。 这 个 元 素 本 身 没 有 行为 ， 
仅 提供 一 块 画布 ,但 它 把 一 个 绘图 API 展现 给 客户 端 JavaScript， 以 使 脚本 能 够 将 
需要 绘制 的 东西 绘制 到 这 块 画布 上 .下 面 通过 canvas 元 素来 显示 一 个 红色 的 拢 形 : 


口 command 该 元 素 用 于 定义 命令 按钮 ， 比 如 单 选 按钮 、 复 选 框 或 按钮 等 。 只 有 当 
该 元 素 位 于 menu 元 素 内 时 ， 该 元 素 才 是 可 见 的 ， 否 则 不 会 显示 这 个 元 素 ， 但 是 
可 以 用 它 规定 键盘 快捷 键 。 

口 details 该 元 素描 述 文档 或 文档 某 个 部 分 的 细节 ， 它 可 以 与 summary 元 素 配合 使 
用 。summary 元 素 提供 标题 或 图 例 ， 其 中 ， 标 题 是 可 见 的， 用 户 单 击 标题 时 ， 会 
显示 出 细节 信息 。summary 元 素 应 该 是 details 元 素 的 第 一 个 子 元 素 。 

口 datalist 该 元 素 用 于 定义 可 选 数据 的 列表 ， 与 input 元 素 配合 使 用 可 以 制作 出 含 
有 输入 文本 框 的 下 拉 列 表 。 该 元 素 在 HTML 5 中 的 应 用 如 下 所 示 : 


元 素 时 ， 需 要 使 用 input 元 素 的 list 属性 来 绑 定 datalist。 
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datalist 及 其 选项 不 会 被 显示 出 来 , 它 仅 仅 是 合法 的 输入 值 列 表 。 在 使 用 a 


口 datagrid 该 元 素 用 于 定义 可 选 数据 的 列表 ， 它 以 树 形 列表 的 形式 来 显示 。 在 
HTML 5 中 的 具体 应 用 如 下 所 示 : 


口 keygen 该 元 素 用 于 生成 表单 的 密 钥 。 当 提交 表单 时 ， 私 钥 存 储 于 本 地 ， 公 和 角 发 
送 到 服务 器 。 该 元 素 在 HTML 5 中 的 具体 应 用 如 下 所 示 : 


口 output 该 元 素 用 于 定义 不 同类 型 的 输出 ， 比 如 脚本 的 输出 。 该 元 素 在 HIML 5 
中 的 应 用 如 下 所 示 : 


口 source 该 元 素 为 媒介 元 素 (比如 video 和 audio )， 用 于 定义 媒介 资源 。 具 体 应 用 
如 下 所 示 : 


口 menu 该 元 素 用 于 定义 菜单 列表 。 


HTML 5 中 新 增 了 很 多 input 元 素 的 类 型 ， 如 下 所 示 。 

口 email 表示 必须 输入 E-mail 地 址 的 文本 输入 框 。 

url 表示 必须 输入 URL 地 址 的 文本 输入 框 。 

number 表示 必须 输入 数值 的 文本 输入 框 。 

range 表示 必须 输入 一 定 范围 内 数字 值 的 文本 输入 框 。 

Date Pickers 表示 可 供 选 取 日 期 和 时 间 的 新 型 输入 文本 框 ， 共 有 6 种 样式 : 
date 可 选取 日 、 月 、 年 的 文本 框 。 

month 可 选取 月 份 和 年 份 的 文本 框 。 

Week ”可 选择 星期 和 年 份 的 文本 框 。 

time 可 选择 时 间 (小 时 和 分 钟 ) 的 文本 框 。 

datetime 可 选择 时 间 、 日 、 月 、 年 (UTC 时 间 ) 的 文本 框 。 
datetime-local 可 选择 时 间 、 日 、 月 、 年 (本 地 时 间 ) 的 文本 框 。 


由 于 各 种 原因 ， 在 HIML 5 中 废除 了 很 多 元 素 ， 这 里 将 对 这 些 废除 的 元 素 进行 简单 的 
介绍 。 

口 、 能 使 用 CSS 替代 的 元 素 

对 于 basefont、big、center、font、s、strike、tt、u 这 些 元 素 ， 由 于 它们 的 功能 都 是 纯 
粹 为 画面 展示 服务 的 ， 而 HTML 5 中 提倡 将 画面 展示 性 功能 放 在 CSS 样式 表 中 统一 编辑 ， 
因此 将 这 些 元 素 废除 ， 并 使 用 编辑 CSS、 添 加 CSS 样式 表 的 方式 进行 替代 。 其 中 font 元 素 
允许 由 创作 者 手动 来 插入 ; s 元 素 和 strike 元 素 可 以 由 del 元 素 蔡 代 ; tt 元素 可 以 由 CSS 的 
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font-family 属性 来 蔡 代 。 

口 不 再 使 用 frame 框架 

对 于 frameset 元 素 、frame 元 素 与 noframes 元 素 ， 由 于 frame 框架 对 页 面 可 用 性 存在 
负面 影响 ， 因 此 在 HTML 5 中 不 再 支持 frame 框架 ， 只 支持 这 ame 框架 ， 或 者 使 用 服务 器 
方 创建 的 由 多 个 页 面 组 成 的 复合 页 面 的 形式 。 

口 只 有 部 分 浏览 器 支持 的 元 素 

对 于 applet、bgsound、blink、marquee 等 元 素 ， 由 于 只 有 部 分 浏览 器 支持 这 些 元 素 ， 
特别 是 bgsound 元 素 以 及 marquee 元 素 ， 只 被 mnternet Explorer 所 支持 ， 因 此 在 HIML 5 中 
被 废除 。 其 中 applet 元 素 可 由 embed 元 素 或 object 元 素 蔡 代 ; bgsound 元 素 可 由 audio 元 素 
替代 ; marquee 可 由 JavaScript 编程 的 方式 所 替代 。 

口 其 他 被 废除 的 元 素 

除了 上 面 介绍 的 元 素 之 外 ，HTML 5 还 废除 了 很 多 元 素 。 被 废除 的 元 素 有 acronym、 
dir、isindex、listing、xmp、nextid、plaintext, 这 些 元 素 都 被 其 他 元 素 所 替代 。 例如 : acronym 
由 abbr 元 素 替 代 、dir 由 ul 元 素 替 代 、isindex 由 form 元 素 与 input 元 素 相 结合 的 方式 替代 、 
listing 由 pre 元 素 替 代 、xmp 由 code 元 素 奉 代 、nextid 由 GUIDS 替代 、plaintext 由 “text/plian” 
的 MIME 类 型 替代 。 


1.3.3 ”新 增 的 属性 和 废除 的 属性 


在 HIML 5 中 增加 和 废除 很 多 元 素 的 同时 ， 也 增加 和 废除 了 很 多 属性 ， 本 节 对 于 这 些 
增加 和 废除 的 属性 进行 简单 介绍 。 


HTML 5 与 HIML 4 相 比 ， 新 增 了 很 多 属性 ， 主 要 体现 在 与 表单 相关 的 属性 和 与 链接 
相关 的 属性 两 个 方面 。 

口 “与 表单 相关 的 属性 

新 增 的 与 表单 相关 的 属性 主要 体现 在 如 下 几 个 方面 : 

(1) 可 以 对 input、select、textarea 与 button 元 素 指定 autofocus 属性 。 它 以 指定 属性 的 
方式 使 元 素 在 画面 打开 时 自动 获得 焦点 。 

(2) 可 以 对 input 元 素 与 textarea 元 素 指 定 placeholder 属性 , 它 代 表 帮 助 用 户 进 行 输入 
的 提示 文字 ， 提 示 用 户 可 以 输入 的 内 容 。 

(3) 可 以 对 input、output、select、textarea、button 与 fieldset 指定 form 属性 ， 声 明 它 
属于 哪个 表单 ， 然 后 将 其 放置 在 页 面 上 任何 位 置 ， 而 不 是 表单 之 内 。 

(4) 可 以 对 input 元 素 〔 除 非 是 隐藏 元 素 、image 类 型 或 button 类 型 ) 与 textarea 元 素 
指定 required 属性 。 该 属性 表示 在 用 户 提交 的 时 候 进行 检查 ， 使 得 该 元 素 内 必须 有 输入 
内 容 。 

(5) 为 input 元 素 增 加 了 几 个 新 的 属性 : autocomplete、min、max、multiple、pattern 
与 step。 同 时 还 有 一 个 新 的 list 元 素 与 datalist 元 素 配合 使 用 。datalist 元 素 与 autocomplete 


属性 配合 使 用 。multiple 属性 允许 在 上 传 文件 时 一 次 上 传 多 个 文件 。 

(6) 为 input 元 素 与 button 元 素 增 加 了 新 属性 formaction、formenctype、formmethod、 
formnovalidate 与 formtarget, 它们 可 以 重 载 form 元 素 的 action、 enctype、 method、 novalidate 
与 target 属性 。 

(7) 为 fieldset 元 素 增加 了 disabled 属性 ， 可 以 将 它 的 子 元 素 设置 为 disabled (无 效 ) 

(8) 为 input、button、form 元 素 增加 了 novalidate 属性 ， 该 属性 可 以 取消 提交 时 进行 
的 有 关 检 查 ， 表 单 可 以 被 无 条 件 的 提交 。 

口 与 链接 相关 的 属性 

新 增 的 与 链接 相关 的 属性 主要 体现 在 如 下 几 个 方面 : 

(1) 为 a 与 area 元 素 增加 了 media 属性 ， 该 属性 规定 目标 URL 是 为 什么 类 型 的 媒介 / 
设备 进行 优化 的 。media 只 能 在 href 属性 存在 时 使 用 。 

(2) 为 area 元 素 增加 了 hreflang 属性 与 rel 属性 ， 以 保持 与 a 元 素 、link 元 素 的 一 致 。 

(3) 为 link 元 素 增加 了 新 属性 sizes。 该 属性 可 以 与 icon 元 素 结合 使 用 (通过 rel 属性 )， 
该 属性 指定 关联 图 标 〈icon 元 素 ) 的 大 小 。 

(4) 为 base 元 素 增加 了 target 属性 ， 主 要 目的 是 保持 与 a 元 素 的 一 致 性 ， 同 时 target 
元 素 由 于 在 Web 应 用 程序 中 , 尤其 是 在 与 过 ame 结合 使 用 时 ， 是 非常 有 用 的 ， 所 以 不 再 是 
不 赞成 使 用 的 元 素 了 。 

口 其 他 属性 

除了 上 面 介 绍 的 与 表单 和 链接 相关 的 属性 外 ，HTML 5 还 增加 了 下 面 几 个 属性 : 

(1) 为 ol 元 素 增 加 属性 reversed， 用 于 指定 列表 倒序 显示 。 

(2) 为 meta 元 素 增加 charset 属性 ， 因 为 这 个 属性 已 经 被 广泛 支持 ， 而 且 为 文档 的 字 
符 编码 的 指定 提供 了 一 种 比较 良好 的 方式 。 

(3) 为 menu 元 素 增加 了 两 个 新 的 属性 ， 分 别 是 type 与 label。 其 中 ，label 属性 为 菜单 
定义 一 个 可 见 的 标注 ，type 属性 让 菜单 可 以 以 上 下 文 菜单 、 工 具 条 与 列表 菜单 3 种 形式 
出 现 。 

(4) 为 style 元 素 增加 scoped 属性 ， 用 来 规定 样式 的 作用 范围 ， 壁 如 只 对 页 面 上 某 个 
树 起 作用 。 

(5) 为 script 元 素 增加 async 属性 ， 用 于 定义 脚本 是 否 异步 执行 。 

(6) 为 html 元 素 增加 属性 manifest， 开 发 离线 Web 应 用 程序 时 ， 与 API 结合 使 用 ， 定 
义 一 个 URL， 在 这 个 URL 上 描述 文档 的 缓存 信息 。 

(7) 为 过 ame 元 素 增加 3 个 属性 sandbox、seamless 与 srcdoc， 用 来 提高 页 面 安全 性 ， 
防止 不 信任 的 Web 页 面 执行 某 些 操作 。 


HTML 4 中 的 一 些 属性 在 HTML 5 中 不 再 被 使 用 ， 而 是 采用 其 他 属性 或 其 他 方案 进行 
替代 ， 具 体 如 表 1-1 所 示 。 


align 


alink link、 text, vlink, background、 


bgcolor 


align, bgcolor, border, cellpadding、 
cellspacing、frame、rules、width 
align 、 char 、charoff 、height 、 


nowrap、valign 


align、bgcolor 、char 、charoff 、 
height、nowrap、valign、width 
align, bgcolor, char, charoff. valign 
align、 char、 charoff, valign、 width 
align、border、hspace、vspace 


clear 

compact、type 
compact 

compact 

width 
align、hspace、vspace 


align、noshade、size、width 
align、frameborder、scrollingma- 


rginheight、marginwidth 
autosubmit 


caption 、 input 、 


legend、 div\ hl、\ h2、 


h3、h4、h5、h6、Pp 


在 被 链接 的 资源 中 使 用 HTTP content-type 
头 元 素 

使 用 area 元 素 代替 a 元 素 

使 用 a 元 素 链接 到 较 长 描述 

多 余 属 性 ， 被 省 略 

多 余 属 性 ， 被 省 略 

多 余 属 性 ， 被 省 略 

多 余 属性 ， 被 省 略 

id 

只 为 某 个 表单 域 使 用 scheme 

使 用 data 与 type 属性 类 调用 插件 。 需 要 使 
用 这 些 属性 来 设置 参数 时 , 使 用 param 属性 
使 用 name 与 value 属性 ,不 声明 值 的 MIME 
类 型 

使 用 以 明确 简洁 的 文字 开头 , 后 跟 详 述 文字 
的 形式 。 可 以 对 更 详细 内 容 使 用 tile 属性 ， 
来 使 单元 格 的 内 容 变 得 简短 

在 被 链接 的 资源 中 使 用 HTTP Content-type 
头 元 素 


使 用 CSS 样式 表 进行 替代 


使 用 CSS 样式 表 进行 奉 代 
使 用 CSS 样式 表 进行 替代 
使 用 CSS 样式 表 进行 奉 代 


使 用 CSS 样式 表 进 行 替代 


使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进 行 替代 
使 用 CSS 样式 表 进 行 替代 
使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进行 替代 
使 用 CSS 样式 表 进 行 蔡 代 
使 用 CSS 样式 表 进 行 蔡 代 


使 用 CSS 样式 表 进行 替代 


1.4 Flash、Silverlight 与 HTML S 


Flash 与 Silverlight 是 时 下 应 用 最 广泛 的 两 种 RIA 技术 , 而 目前 HTML 5 风声 稚 噢 , 也 
引发 了 微软 和 Adobe 就 Flash、Silverlight 和 HTML 5 的 一 番 辩 论 。 本 节 将 从 3 个 方面 简单 
对 比 这 3 种 技术 。 

口 ”吸引 开发 者 

开发 者 是 公司 争夺 的 核心 ，Adobe 几乎 抢占 了 全 部 终端 用 户 市 场 ， 互 联网 上 98% 的 计 
算 机 运行 Flash， 这 对 开发 者 来 说 非常 重要 。 虽 然 Adobe 并 不 是 操作 系统 提供 商 ， 但 他 们 
让 Flash 进驻 到 几乎 每 一 个 浏览 器 和 平台 。 

微软 的 Silverlight 已 经 发 展 到 4.0， 声 称 拥 有 45% 的 市 场 ， 在 欧洲 和 亚洲 更 高 〈60% )。 
它 也 提供 跨 平 台 和 浏览 器 支持 ， 虽 然 对 Linux 的 支持 不 够 及 时 。 另 外 ， 微 软 声 称 ， 他 们 已 
经 拥有 近 50 万 开发 者 。 微 软 和 Adobe 都 有 超级 大 客户 ， 微 软 受 益 于 体育 运动 赛事 的 “ 泛 
滥 ” 他 们 还 为 Netflix 以 及 维多利亚 内 衣 Show 提供 在 线 视频 。Adobe 则 几乎 涵盖 了 所 有 
大 型 视频 网 站 ， 包 括 YouTube 和 Hulu。 

微软 在 Silverlight 的 开发 工具 方面 做 得 很 好 ,他们 在 Silverlight 刚刚 推出 时 就 向 开发 者 
社区 提供 了 开发 工具 ， 微 软 .NET 开发 者 可 以 直接 在 VisualStudio 中 开发 Silverlight 应 用 。 
Flash 开发 者 则 使 用 ActionScript、Flex、FlashBuilder 等 工具 进行 开发 。 

另外 ， 在 编码 器 、API、 音 频 处 理 、 文 件 格式 与 尺寸 、 性 能 、 动 画 模 式 等 方面 ， 双 方 
也 是 各 有 千秋 。 不 过 ， 双 方 辩论 的 焦点 最 终 放 在 如 何 同时 吸引 前 端 和 后 端 开 发 者 上 。 微 软 
的 Expression 目前 只 支持 Windows， 将 Mac 阵营 的 开发 者 拒 之 门 外 ， 同 时 ，Adobe 也 借 
Catalyst 吸引 各 个 平台 的 开发 者 。 微 软 的 Goldfarb 提 到 他 们 注重 开发 者 的 传统 ，Adobe 则 
强调 他 们 的 用 户 基 础 ， 双 方 都 保证 会 为 消费 者 及 企业 用 户 提供 跨 媒 体 、 富 Internet 体验 。 

口 _ HTMLS 

如 果 说 Silverlight 的 推出 让 Adobe 感到 棘手 ， 那 么 现在 ， 双 方 都 应 该 对 HTML 5 感到 
球 手 。HTML 5 的 使 命 是 让 富 Intemet 应 用 成 为 HTML 标准 (DrDobbsreport)。 不 过 ， 双 方 
都 不 承认 HTML 5 对 他 们 的 威胁 ， 相 反 ， 他 们 表示 要 与 HTML 5 和 平 共 处 ， 让 Flash 和 
Silverlight 在 HTML 5 下 工作 ， 并 在 他 们 的 工具 中 对 HTML 5 提供 支持 。 

口 移动 

Adobe 的 Murarka 提 到 ,在 日 本 ，Flash 是 除了 短 消息 之 外 的 第 二 大 移动 应 用 。 根 据 他 
们 的 路 线 图 ， 他 们 将 在 19 到 20 家 最 大 的 OEM 商 那 里 提供 Flash 支持 (Google 已 经 演示 
过 Android 中 的 Flash)。 

谈 到 微软 ， 虽 然 Silverlight 甚至 不 支持 微软 自己 的 移动 操作 系统 ， 不 过 ， 微 软 已 经 宣 
布 同 Nokia 合作 ， 向 Symbian 系统 提供 Silverlight。 

接着 谈 到 iPhone， 这 个 让 Adobe 如 梗 在 喉 的 产品 ，Adobe 已 经 要 求 开 发 者 编写 可 以 在 
iPhone 上 运行 的 Flash 程序 .Murarka 表示 , 他 们 会 继续 同 苹果 沟通 , 但 苹果 不 允许 在 iPhone 
上 运行 解释 代码 (如 Java、PHP、PERL)。 
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鉴于 将 来 会 有 比 桌面 电脑 更 多 的 移动 设备 投入 使 用 ,微软 和 Adobe 必 将 在 移动 领域 激 
烈 竞 争 ， 目 前 的 手机 硬件 还 不 适合 运行 太 多 富 Intemet 应 用 ， 但 随 着 硬件 的 发 展 ， 未 来 的 
两 三 年 就 可 以 实现 这 个 目标 。 


上 


1.5 项 目 案例 : 运行 HTML 5 测试 页 面 @ 


HTML 5 Test 网 站 (www.html5test.com) 是 用 来 测试 浏览 器 对 HTML 5 热门 新 功能 的 
支持 程度 。 测 试 的 满分 是 500 分 ， 如 果 浏 览 器 同时 支持 那些 没有 列 入 W3C 的 标准 将 会 获 
得 附加 分 ， 例 如 支持 MPEG-4 可 获得 2 附加 分 。 

截至 2012 年 3 月 15 日 ,五 大 浏览 器 最 新 版 本 所 取得 的 分 数 如 表 1-2 所 示 。 


表 1-2 浏览 器 得 分 情况 


浏览 器 正式 版 本 分 数 测试 版 本 分 数 

Internet Explorer 。 9.0.8112.16421 141 分 +5 附加 分 10 306 分 +6 附加 分 
Mozilla Firefox 11.0 335 分 +9 附加 分 14 Alpha 1 335 分 +9 附加 分 
Opera 11.61 Build 1250 329 分 +9 附加 分 ”12 Alpha 344 分 +9 附加 分 
Apple Safari 5.1.4 (7534.54.16) 262 分 +2 附加 分 $2 352 分 +8 附加 分 
Google Chrome 17.0.963.79 374 分 +13 附加 分 ”19.0.1074.0 379 分 +13 附加 分 


Firefox 浏览 器 运行 测试 页 面 的 效果 如 图 1-3 所 示 ，Chrome 浏览 器 运行 测试 页 面 的 效 
果 如 图 1-4 所 示 。 
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图 1-3 Firefox 浏览 器 测试 效果 图 1-4 Chrome 浏览 器 测试 效果 


随 着 HTML 5 的 发 展 , 该 测试 网 站 也 会 添加 关于 新 特性 的 测试 项 目 。 因此 ， 
测试 满分 会 随 之 发 生变 化 。 另 外 分 数 高 只 代表 浏览 器 现时 对 所 挑选 的 新 网 
页 编码 整体 上 有 较 佳 的 支持 ， 并 不 代表 日 后 其 表现 的 趋势 ， 因 此 分 数 只 能 
作为 参考 。 


1.6 “习题 


一 、 填 空 题 


1. 从 HIML 5 开始 ， 文 件 的 字符 编码 推荐 使 用 

2. HTML 5 草案 最 早 于 2004 年 提出 ， 在 2007 年 时 被 采纳 。 

3. 在 HIML 5 中 新 增 的 属性 可 使 input 元 素 自动 获取 鼠标 的 输入 光标 。 
4. 使 用 新 增 的 元 素 可 以 在 页 面 中 高 亮 显示 一 段 文本 。 

5. 元 素 表示 文档 中 的 一 块 独立 的 内 容 。 


1. 下 面 与 HTML 5 发 展 没 有 关系 的 组 织 是 ___。 
A. W3C 
B. ISO 
C. IETIF 
D. WHATWG 
2. 下 列 关 于 HTML 5 新 特性 的 描述 不 正确 的 是 。 
A. 新 增 contenteditable 属性 
B. 新 增 header 和 footer 元 素 
C. 新 增 required 属性 
D. 新 增 input 元 素 
3. 下 列 关 于 HTML 5、Flash 和 Silverlight 的 描述 ， 错 误 的 是 。 
A._ Silverlight 支持 移动 平台 
B. HTML 5 比 Flash 和 Silverlight 更 容易 搜索 
C. Flash 可 用 ActionScript，Flex，Flash Builder 等 开发 工具 
D. HTML 5 支持 移动 平台 
4. HTML 5 中 新 的 标记 一 一 ContentType 表示 的 是 
A. 编码 格式 
B. 声明 
C. 内 容 类 型 
D. 以 上 都 不 是 
5. 下 面 关于 设置 编码 格式 的 语法 正确 的 是 。 


A. 
B. 


5 


D. 以 上 都 错误 
三 、 上 机 练习 
1. 制作 淘宝 网 头 部 页 面 


编写 如 图 1-5 所 示 的 效果 对 应 的 HTML 代码 。 该 页 面 由 一 个 2 行 8 列 的 表格 来 布局 ， 
其 中 ， 右 边 第 二 行 的 第 2、3、4、5、6、7、8 列 跨 列 合 并 ， 存 放 搜 索 栏 与 搜索 按钮 。 
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图 1-5 淘宝 网 头 部 页 面 


1.7 ”实践 疑难 解答 


1.7.1 为 什么 要 使 用 HTML 5 


| 看 册 为 什么 要 使 用 HTML5 
[2 外 ”网 络 课 堂 : http://bbs.itzcn.com/thread-19732-1-1.html 


【问题 描述 】: 感觉 HTML 本 身 就 是 一 个 数据 展现 、 页 面 美 化 的 一 种 语言 ， 而 HTML 4 
已 经 完全 可 以 做 到 这 些 ， 那 为 什么 还 要 使 用 HTML 5 呢 ? 它 有 哪些 优点 ? 

【正确 答案 】: HTML 5 的 优点 有 很 多 ， 下 面 将 罗列 一 些 使 用 HTML 5 的 原因 。 

口 易 用 性 

两 个 原因 使 得 使 用 HIML 5 创建 网 站 更 加 简单 : 语义 及 其 ARIA。 新 的 HTML 标签 如 
header、footer、nav、section 和 aside 等 使 得 阅读 者 更 加 容易 去 访问 内 容 。 图 1-6 所 示 为 使 
用 HIML 5 中 语义 标签 定义 的 页 面 运行 效果 及 源 代码 。 

口 视频 和 音频 支持 

在 HTML 5 之 前 ， 要 显示 视频 或 者 音频 ， 必 须 通 过 Flash 或 者 插件 。 在 HIML 5 中 通 
过 video 和 audio 标签 就 能 访问 视频 或 者 音频 。 例 如 下 面 的 示例 代码 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 
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< 于 我 ， 登录 


此 淑敏 孝心 无 价 


于 于 来 尝 的 攻 事 。 家 庭 十 分 困难 ， 父 亲 通 去 ， 弟 着 厂 数 f 
为 著 是 一 个 自私 的 学 子 。 求 学 的 路 很 温 
贡 用 母亲 的 鲜血 灌 托 | 一 个 连 : 
为 人 类 的 大 师 ?孝心 无 从 我 也 不 


日 方 长 ， 相 信 水 到 渠 成 ， 相 信 自己 必 有 
了 时 间 的 残酷 ， 忘 了 人 生 的 短暂 ， 忘 了 世上 有 永远 


走 了 ， 遗 留 给 我 们 永 无 党 还 的 心情 。 你 就 永远 无 以 言 替 。 
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articlelist,html"; 情 客 目 录 。 


picture.htnl"> 相 朋 - 
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图 1-6 HTML 5 页面 


<video poster="myvideo.jpg" controls> 


myvideo.m4v" type="video/mp4" /> 
<source src="myvideo.ogg" type="video/ogg" /> 
<embed src="/to/my/video/player"></embed> 
</video> 


<source sr 


口 DOCTYPE 

在 HTML 5 中 省 略 了 复杂 的 HTML 声明 ,只 需 使 用 DOCTYPE 即 可 ,非常 简单 ， 而且 
兼容 所 有 浏览 器 。 

口 更 清晰 的 代码 

使 用 HTML 5 可 以 通过 使 用 语义 学 的 标签 描述 内 pa nie div 及 其 class 定义 问题 。 
以 前 需要 使 用 大 量 的 div 来 定义 每 -个 页 面 内 容 区 域 , 但 是 使 用 新 的 section、article、header、 
footer、aside 和 nav 标签 ， 可 以 使 代码 更 加 清晰 且 易 于 i 读 。 如 下 面 的 代码 所 示 : 


<header> 
<hl>Header Text</h1> 
<nav> 
<ul> 
<li><a href="#">Link</a></1i> 
<li><a href="#">Link</a></1i> 
<li><a href="#">Link</a></1i> 
</ul> 
</nav> 


</header> 


口 更 聪明 的 存储 

HTML 5 中 最 有 特点 的 特性 就 是 本 地 存储 。 有 一 点 像 比 较 老 的 技术 Cookie 和 客户 端 数 
据 库 的 融合 。 它 比 Cookie 更 好 用 ， 因 为 支持 多 个 Windows 存储 ， 它 拥有 更 好 的 安全 性 和 
性 能 ， 即 使 浏览 器 关闭 后 也 可 以 保存 。 

口 更 好 的 互动 

用 户 都 喜欢 更 好 的 互动 ， 都 喜欢 对 用 户 有 反馈 的 动态 网 站 ， 这 样 用 户 可 以 享受 互动 的 
过 程 。 使 用 HTML 5 的 画图 标签 可 以 实现 很 多 的 互动 和 动画 ， 就 像 使 用 Flash 达到 的 效果 。 

口 ”游戏 开发 

使 用 HIML 5 的 canvas 可 以 开发 游戏 。HTML 5 提供 了 一 个 非常 伟大 的 、 移 动 友好 的 
方式 去 开发 有 趣 互动 的 游戏 。 图 1-7 所 示 为 使 用 HIML 5 开发 的 游戏 运行 效果 截图 。 
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图 1-7 游戏 截图 


口 移动 特性 

HTML 5 是 最 移动 化 的 开发 工具 。 随 着 Adobe 宣布 放弃 移动 Flash 开发 ， 将 会 考虑 使 
用 HIML 5 来 开发 Web 应 用 。 当 手机 浏览 器 完全 支持 HTML 5 时 ,那么 开发 移动 项 目 将 会 
和 设计 更 小 的 触摸 显示 一 样 简单 。 


1.7.2 HTML 5 的 安全 问题 


出 HTML 5 的 安全 问题 
网 络 课堂 : http:Wbbs.itzcn.comy/thread-19733-1-1.html 


【问题 描述 }，W3C 为 处 理 网 页 指定 了 一 套 新 的 标准 来 支持 HTML 535， 难道 没有 安全 漏 
洞 吗 ? HTML 5 给 Web 带 来 了 许多 功能 和 能 力 ,黑客 现在 使 用 简单 的 HIML 5 和 JavaScript 
脚本 就 能 够 做 恶意 工作 ， 而 这 些 恶意 工作 以 前 是 不 可 能 做 到 的 ， 这 是 否 就 是 HIML 5 带 给 
开发 人 员 的 安全 漏洞 呢 ? 


【正确 答案 】: 应 用 程序 安全 专家 表示 ，HTML 5 给 开发 人 员 带 来 了 新 的 安全 挑战 。 荚 
果 公 司 与 Adobe 公司 之 间 的 口水 战 带 来 对 HTML 5 命运 的 诸多 猜测 , 尽管 HTML 5 的 实现 
还 有 很 长 的 路 要 走 ， 但 可 以 肯定 的 一 点 是 ， 运 用 HTML 5 的 开发 人 员 将 需要 为 应 用 程序 安 
全 开发 生命 周期 部 署 新 的 安全 功能 以 应 对 HTML 5 带 来 的 安全 挑战 。 那 么 HTML 5 将 会 对 
用 户 需要 获 盖 的 攻击 面 带 来 怎样 的 影响 ? 下面 就 来 探讨 关于 HTML 5 的 几 个 重要 安全 
问题 。 

口 “客户 端 存储 

Denim 集团 应 用 程序 安全 研究 部 门 的 主管 Dan Comell 表示 ， 早 期 版 本 的 HTML 仅 允 
许 网 站 将 Cookies 作为 本 地 信息 存储 ， 而 这 些 空间 相对 较 小 ， 仅 适用 于 存储 简单 的 档案 信 
息 或 者 作为 存储 在 其 他 位 置 的 数据 (例如 会 话 了 D) 的 标识 符 。 然 而 ,HTML 5 LocalStorage 
则 允许 浏览 器 本 地 存储 大 量 数据 ， 人 允许 使 用 新 类 型 应 用 程序 。 

随 之 而 来 的 风险 就 是 ， 敏 感 数据 可 能 被 存储 在 本 地 用 户 工 作 站 ， 而 物理 访问 或 者 破坏 
该 工作 站 的 攻击 者 ， 就 能 够 轻松 获得 敏感 数据 ， 这 对 于 使 用 共享 计算 机 的 用 户 更 加 危险 。 
从 定义 上 来 说 ,HTML 5 只 是 能 够 在 客户 端 系统 存储 信息 , 那么 用 户 就 具备 基于 客户 端 SQL 
注入 攻击 的 潜在 能 力 ， 或 者 可 能 用 户 的 某 个 客户 端的 数据 库 是 恶意 的 ， 当 与 生产 系统 同步 
时 ， 则 可 能 出 现 同步 问题 ， 或 者 客户 端的 潜在 恶意 数据 将 被 插入 到 生产 系统 。 

为 了 解决 这 个 问题 ， 开 发 人 员 需 要 能 够 验证 数据 是 否 为 恶意 的 。 

口 ” 跨 域 通信 

之 前 版 本 的 HIML 只 允许 JavaScript 发 出 XML HTTP 请 求 调用 回 原来 的 服务 器 ， 而 
HTML 5 放宽 了 这 个 限制 , XML HTTP 请 求 可 以 发 送 给 任何 允许 这 种 请 求 的 服务 器 。 当 然 ， 
如 果 服 务 器 不 可 信任 的 话 ， 这 也 会 带 来 严重 的 安全 问题 。 

例如 ， 建 立 一 个 mashup 炊 合 ， 将 两 种 以 上 使 用 公共 或 者 私有 数据 库 的 web 应 用 合 
并 形成 一 个 整合 应 用 )， 通 过 JSON (JavaScript Object Notation) 将 第 三 方 网 站 的 比赛 比分 
拉 过 来 ， 这 个 网 站 可 能 会 发 送 恶 意 数 据 到 用 户 浏 览 器 正在 运行 的 应 用 程序 上 。 虽 然 
HITML 5 允许 新 类 型 的 应 用 程序 的 建立 ， 但 如 果 开发 人 员 在 开始 使 用 这 些 功 能 时 ， 并 不 理 
解 他 们 所 建立 的 应 用 程序 的 安全 意义 ， 那 么 将 会 给 用 户 带 来 很 大 安全 风险 。 

对 于 依赖 于 PostMessage( 来 编写 应 用 程序 的 开发 人 员 而 言 ， 必 须 仔 细 检 查 以 确保 信息 
是 来 源 于 他 们 自己 的 网 站 ， 和 否则 来 自 其 他 网 站 的 恶意 代码 可 能 会 制造 恶意 信息 。 

另 一 个 相关 问题 是 ， 万 维 网 联盟 目前 为 跨 源 资源 共享 设计 提供 了 一 种 使 用 类 似 于 跨 域 
机 制 绕 过 同 源 政策 的 方法 。IE 部 署 的 安全 功能 与 Firefox、Chrome 以 及 Safari 都 不 相同 ， 
特别 是 因为 某 些 参考 代码 目前 非常 不 安全 ， 开 发 人 员 需 要 确保 他 们 创建 过 于 宽松 访问 控制 
列表 的 危害 。 

口 Iframe 安全 

从 安全 角度 来 看 ，HTML 5 也 有 不 错 的 功能 ， 例 如 计划 支持 iframe 的 沙 盒 属 性 。 这 个 
属性 将 允许 开发 者 选择 数据 解 译 的 方式 ， 不 幸 的 是 ， 与 大 部 分 HTML 一 样 ， 这 个 设计 很 可 
能 被 开发 人 员 误 解 ， 很 可 能 因为 不 便于 使 用 而 被 开发 人 员 禁 用 。 如 果 处 理 得 当 ， 这 个 功能 
将 能 够 帮助 抵御 恶意 第 三 方 广告 或 者 防止 不 可 信任 内 容重 放 。 
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HTML 5 的 出 现 吸 引 了 越 来 越 多 人 的 目光 。 与 HTML 4 之 前 的 版 本 相 比 ， 它 实现 了 更 
好 的 灵活 性 和 更 强 的 互动 性 。 其 中 最 重要 的 一 方面 在 于 新 元 素 的 添加 ， 如 结构 元 素 header 
和 footer， 页 面 交 互 元 素 details、menu、command 和 meter 等 ， 本 章 将 详细 介绍 HTML 5 
中 新 增加 的 元 素 。 

通过 本 章 的 学 习 ， 读 者 可 以 熟练 掌握 并 使 用 HTML 5 中 常用 的 结构 元 素 、 交 互 元 素 、 
分 组 元 素 及 节点 元 素 等 ， 也 可 以 使 用 这 些 元 素 构建 简单 的 网 站 页 面 。 


> 掌握 html 根 元 素 的 使 用 方法 

熟悉 文档 头 部 元 素 包括 的 内 容 

熟练 掌握 HTML 5 中 元 素 常用 的 全 局 属性 
掌握 HIML 5 中 常用 的 结构 元 素 

掌握 HIML 5 中 常用 的 交互 元 素 

熟悉 HTML 5 中 常用 的 文本 层次 语义 元 素 


Vv 
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能 够 使 用 HIML 5 中 新 添加 的 元 素 创建 简单 的 页 面 
2.1 html 根 元 素 


html 元 素 是 HTML 文档 中 最 外 层 的 元 素 ， 也 称 作 根 元 素 。 在 HTML 文档 中 html 元 素 
代表 了 文档 的 根 ， 其 他 所 有 的 元 素 都 是 在 该 元 素 的 基础 上 进行 延伸 或 拓展 的 。 

在 HIML 4 之 前 的 版 本 中 声明 html 元 素 时 xmlns 属性 是 必需 的 , 它 没 有 任何 实际 效果 。 
但 是 为 了 验证 ， 该 属性 在 HTML 转换 为 XHTML 的 过 程 中 是 非常 有 帮助 的 。 在 HIML 5 
中 xmins 属性 可 以 直接 省 略 ， 另 外 HIML 5 中 新 增加 了 html 元 素 的 一 个 属性 : manifest。 
该 属性 定义 了 一 个 URL， 这 个 URL 描述 了 文档 的 缓存 信息 。 


如 果 读 者 出 于 某 种 原因 必须 定义 xmlns 属性 ， 其 唯一 的 合法 值 是 
“http://www.w3.o0rg/1999/xhtml” 


下 面 通过 一 个 简单 的 案例 介绍 HTML 5 文档 的 创建 和 使 用 。 


【实践 案例 2-1】 
在 Dreamweaver CS5 中 新 建 HTML 5 页 面 ， 在 页 面 的 body 部 分 添加 内 容 并 且 在 head 
部 分 为 元 素 指定 样式 。 其 具体 代码 如 下 所 示 : 


上 述 代码 首先 创建 了 html 元 素 并 且 为 该 元 素 指定 了 manifest 属性 的 值 ， 整 个 html 根 
元 素 包括 两 部 分 : head 部 分 和 body 部 分 。head 部 分 通过 meta、title 和 style 元 素 分 别 定义 
了 页 面 的 字符 集 、 标题 和 具体 样式 ; 而 body 部 分 则 通过 创建 多 个 p 元 素 定义 页 面 显 示 的 具 
体内 容 。 


全 SC 口 file:///E:/HTIL/Honevork. htal 


人 们 常常 荡 莫 功成名就、 百事 百 顺 的 人 ， 认 为 他 们 是 生活 中 的 成 功 者 ，i 
只 有 这 些 得 到 生活 回报 的 人 才 会 对 生活 充满 感激 ， 充 满 信心 和 激情 。 耳 实 ， 
着 生生 名人。 和 人 


图 2-1 案例 2-1 运行 效果 


2.2 ”文档 头 部 元 素 


上 一 节 已 经 知道 html 元 素 包 含 head 和 body 两 部 分 ，body 主要 用 来 向 页 面 展示 内 容 ， 
而 head 元 素 则 可 以 称 为 文档 头 部 元 素 。 

head 元 素 中 是 所 有 头 部 元 素 的 容器 ， 该 元 素 内 部 的 元 素 可 以 包含 脚本 、 样 式 、 标 签 及 
提供 元 信息 等 内 容 。head 部 分 常用 的 元 素 有 6 个 ， 其 具体 说 明 如 下 。 
口 base 为 页 面 上 的 所 有 链接 规定 默认 地 址 或 默认 目标 。 
link 定义 文档 与 外 部 资源 之 间 的 关系 ， 一 般 用 来 连接 样式 表 。 
meta 可 提供 有 关 页 面 的 元 信息 , 比如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 
Script 用 户 定义 客户 端 脚本 ， 比 如 JavaScript。 
style 定义 HIML 文档 的 样式 信息 。 
title 定义 文档 的 标题 。 
下 面 将 详细 介绍 这 些 元 素 的 使 用 方法 。 


DD DD 


base 元 素 必须 位 于 head 元 素 的 内 部 ， 通 常情 况 下 ， 浏 览 器 会 从 当前 文档 的 URL 中 提 
取 相 应 的 元 素来 填写 相对 URL 中 的 空白 。 使 用 该 元 素 后 浏览 器 不 再 使 用 当前 文档 的 URL， 
而 是 使 用 指定 的 基本 URL 来 解析 所 有 的 相对 URL， 其 中 包括 a、link、form 和 img 等 元 素 
中 的 URL。 


一 个 文档 中 最 多 使 用 一 个 base 元 素 ， 而 且 建 议 读者 把 该 元 素 排 在 head 元 
素 中 的 第 一 个 元 素 的 位 置 ， 这 样 head 元 素 中 的 其 他 元 素 就 可 以 利用 base 
元 素 中 的 信息 了 。 


假设 图 像 的 绝对 地 址 是 : 
<inmg src-"F://backgroundImage/flower.jpg" target=" blank /> 


下 面 在 页 面 中 的 head 部 分 插入 base 元 素 , 规定 页 面 上 所 有 链接 的 默认 URL 和 默认 日 
标 为 “F://backgroundImage/”， 然 后 在 img 元 素 中 直接 将 sre 属性 设置 为 图 像 的 相对 路 径 ， 
页 面 运 行 时 浏览 器 会 自动 寻找 完整 的 URL。 主 要 代码 如 下 所 示 : 


上 述 代码 中 指定 了 base 元 素 的 两 个 属性 href 和 target 的 值 ，href 属性 规定 在 页 面 中 使 
用 的 URL， 而 target 指定 在 页 面 的 何 处 打开 页 面 上 的 链接 ， 该 属性 的 值 会 被 每 个 链接 中 的 
target 属性 值 所 罗 盖 。 


link 元 素 是 空 元 素 ， 它 仅仅 包含 属性 ， 该 元 素 只 能 位 于 head 部 分 ， 但 可 以 出 现任 意 次 
数 。 大 多 数 的 时 候 都 是 用 来 链接 样式 表 和 外 部 图 标 , 与 HTML 4 之 前 的 版 本 相 比 , HTML 5 
中 新 增加 了 一 个 sizes 属性 ， 该 属性 规定 被 链接 资源 的 尺寸 , 且 该 属性 仅 适用 于 rel= “icon” 
或 rel=“shortcut icon” 的 情况 。 

如 下 代码 演示 了 link 元 素 的 基本 使 用 : 


如 果 使 用 浏览 器 ( 如 Google 浏览 器 ) 运行 上 面 代码 不 显示 页 面 图 标 , 读者 
需要 将 该 页 面 的 信息 保存 到 IIS 信息 保存 到 服务 下 ， 然 后 通过 localhost 的 
方式 进行 访问 。 


i 


meta 元 素 位 于 文档 的 头 部 ， 该 元 素 定 义 了 与 文档 相关 联 的 名 称 和 值 ， 它 常常 以 键 值 对 
的 形式 出 现 。 与 HTML 4 之 前 的 版 本 相 比 ，HIML 5 不 再 支持 scheme 属性 ， 并 且 增 加 了 
charset 属性 ， 通 过 设置 此 属性 使 字符 集 的 定义 更 加 容易 。 如 HIML 5 中 该 meta 元 素 最 简 
单 的 定义 代码 如 下 所 示 : 


meta 元 素 中 包含 name 属性 ， 该 属性 的 值 有 多 个 ， 如 author、description、keywords 和 
revised 等 ， 通 过 这 些 属性 可 以 针对 页 面 添加 元 信息 。 
如 定义 页 面 最 新 版 本 的 代码 如 下 所 示 : 


宣 


谱 


1 如 定义 针对 搜索 引擎 的 关键 字 代 码 如 下 所 示 : 


| 


I 如 针对 页 面 的 描述 代码 如 下 所 示 : 


: 


I 如 每 1 分 钟 刷 新 一 次 页 面 的 代码 如 下 所 示 : 


硬 


如 定义 文档 的 字符 集 代码 如 下 所 示 : 


Ps 


所 有 的 主流 浏览 器 都 支持 script 元 素 ， 该 元 素 既 可 以 包含 脚本 语句 ， 也 可 以 通过 src 
属性 指向 外 部 脚本 文件 。 

在 HIML4 之 前 的 版 本 中 type 属性 是 必需 的 , 但 是 在 HIML 5 中 该 属性 是 可 选 的 。 例 
如 在 head 部 分 定义 了 一 个 script 元 素 ， 在 该 元 素 中 定义 名 称 为 Click0 的 函数 。 在 body 部 
分 定义 了 一 个 提交 按钮 并 且 为 该 按钮 添加 click 事件 。 其 主要 代码 如 下 所 示 : 


HTML 5 中 新 增加 了 名 称 为 async 的 属性 , 该 属性 规定 异步 执行 脚本 。async 属性 和 defer 
属性 都 仅 适 用 于 外 部 脚本 ， 使 用 这 两 个 属性 有 多 种 执行 外 部 脚本 的 方法 。 其 具体 说 明 如 下 
所 示 : 

口 如果 async=“async”: 脚本 相对 于 页 面 的 其 余部 分 异步 执行 ( 当 页 面 继续 进行 解 

析 时 ， 脚 本 将 被 执行 )。 

口 ”如 果 不 使 用 async 且 defer=“defer”: 脚本 将 在 页 面 完 成 解析 时 执行 。 

口 ”如 果 既 不 使 用 async 也 不 使 用 defer: 在 浏览 器 继续 解析 页 面 之 前 立即 读 取 并 执行 

脚本 。 

如 下 示例 代码 通过 script 元 素 添加 了 一 个 外 部 脚本 文件 并 指定 了 async 属性 : 


ii 


style 元 素 定 义 了 HTML 元 素 如 何在 浏览 器 中 呈现 .与 HTML 4 之 前 的 版 本 相 比 , HTML 
5 中 新 增加 了 名 称 为 scoped 的 属性 , 该 属性 规定 样式 只 能 应 用 到 style 元 素 的 父 元 素 及 其 子 
元 素 中 。 如 果 将 该 属性 的 值 指定 为 tue， 则 样式 仅仅 应 用 到 style 元 素 的 父 元 素 及 其 子 元 
素 中 。 

【实践 案例 2-2】 

在 Dreamweaver CS5 中 新 建 HTML 5 页 面 ， 在 head 部 分 添加 style 元 素 并 且 指定 元 素 
的 样式 ， 同 时 在 body 部 分 添加 显示 的 具体 页 面 。 页 面 的 具体 代码 如 下 所 示 : 


上 述 代 码 在 head 部 分 添加 了 对 页 面 内 容 的 指定 样式 , 在 body 部 分 创建 一 个 全 局 的 div 
元 素 。 接 着 再 分 别 添加 两 个 div 元 素 ， 它 们 分 别 表示 “国家 象征 ”和 “基本 象征 ”。 其 运行 
效果 如 图 2-2 所 示 。 

在 上 述 代 码 的 基础 上 重新 添加 新 的 HTML 5 页 面 ， 在 页 面 body 部 分 添加 style 元 素 且 
向 该 元 素 中 添加 scoped 属性 。body 部 分 的 主要 代码 如 下 所 示 : 


重新 运行 上 述 代码 ， 页 面 的 运行 效果 如 图 2-3 所 示 。 
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和: On 
显示 力量 、 增 强国 民 信心， 体现 柱 宁 力 "发挥 和 如 
为 三 个 基 术 竺 征 。 


力 ， 即 为 国庆 庆典 的 三 - 


党 
9 ba 


图 2-2 没有 使 用 scoped 属性 的 效果 图 2-3 使 用 scoped 属性 的 效果 


该 属性 范围 样式 的 实现 是 最 新 的 ， 它 目前 被 隐藏 在 Chrome 浏览 器 的 运行 
标志 里 。 想 要 激活 该 标志 需要 下 载 版 本 号 为 19 或 更 高 的 Chrome 版 本 ， 然 
后 在 chrome://flags 里 找到 【开启 <style scoped>】 选 项 ， 单 击 【启用 】 按 钮 
链接 后 重新 启动 浏览 器 即 可 。 


title 元 素 在 所 有 HTML 文档 中 都 是 必需 的 ， 并 且 所 有 的 主流 浏览 器 都 支持 该 元 素 ， 一 
个 文档 中 不 能 有 一 个 以 上 的 title 元 素 。 该 元 素 的 主要 作用 如 下 所 示 。 

口 定义 浏览 器 工具 栏 中 的 标题 。 

口 提供 页 面 被 添加 到 收藏 夹 时 的 标题 。 

口 显示 在 搜索 引擎 结果 中 的 页 面 标题 。 

title 元 素 的 使 用 方法 与 HIML 4 版 本 一 样 , 如 下 代码 声明 了 页 面 的 head 部 分 中 该 元 素 
的 简单 使 用 : 


2.3 HTML 5 全 局 属性 


全 局 属性 是 指 在 任何 元 素 中 都 可 以 使 用 的 属性 ，HTML 5 与 之 前 的 版 本 相 比 ， 也 添加 


了 多 个 全 局 属性 , 如 contenteditable、 contextmenu、 draggable、 hidden、 spellcheck 以 及 dropzoe 
等 ， 本 节 将 详细 介绍 常用 的 全 局 属性 的 用 法 。 


2.3.1 _ hidden 属性 


HTML 5 中 大 多 数 元 素 都 支持 hidden 属性 ， 该 属性 规定 对 元 素 是 否 进行 隐藏 ， 隐 藏 的 
元 素 将 不 会 被 显示 。 该 属性 有 两 个 值 : true 和 false。 当 hidden 属性 取 值 为 true 时 ， 元 素 将 
会 被 隐藏 且 不 在 页 面 显示 ， 反 之 则 会 显示 。 

【实践 案例 2-3】 

如 下 示例 代码 演示 了 如 何 通过 hidden 属性 控制 div 元 素 在 页 面 的 隐藏 和 显示 : 


上 述 代 码 中 用 户 单 击 不 同 的 单 选 按钮 时 都 会 触发 Click 事件 调用 脚本 函数 ， 然 后 通过 
设置 div 元 素 的 hidden 属性 判断 内 容 的 显示 和 隐藏 。JavaScript 中 的 具体 代码 如 下 所 示 : 


运行 本 示例 的 代码 并 分 别 单 击 【 显 示 】 和 【隐藏 】 单 选 按钮 进行 测试 ， 运 行 效果 如 图 
2-4 和 2-5 所 示 。 


2.3.2 spellcheck 属性 


spellcheck 属性 规定 是 否 对 元 素 内 容 进行 拼写 检查 ， 它 可 以 对 如 下 文本 进行 拼写 检查 。 
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粉色 小 解 粉色 小 解 
修 想 知道 本色 代 表 什 么 信义 四 ? 从 起 知 道 粉色 代表 什么 合 义 网 ? 
昌 陪 配 。 ”显示 O 隐 莹 ”名 用 示 


图 2-4 隐藏 内 容 的 效果 图 2-5 显示 内 容 的 效果 


口 textarea 元 素 中 的 值 。 

口 类 型 为 text 的 input 元 素 中 的 值 ( 非 密码 )。 

口 可 编辑 元 素 中 的 值 。 

spellcheck 属性 有 两 个 值 : tue 〈 默 认 值 ) 和 false。 值 为 true 时 表示 检测 输入 框 的 值 ， 
反之 则 不 检测 。 该 属性 的 基本 使 用 方法 如 下 代码 所 示 : 


运行 上 述 代 码 并 输入 内 容 进行 测试 ， 测 试 效果 如 图 2-6 所 示 。 


计 入 和 一 小 加 和 六 (zzellcazckcfalze : 
| mm i Ji sen 


2-6 使 用 spellcheck 属性 的 运行 效果 


2.3.3 contenteditable 属性 


contenteditable 属性 规定 是 否 可 编辑 元 素 的 内 容 , 但 是 前 提 是 该 元 素 必须 可 以 获得 鼠标 
焦点 并 且 其 内 容 不 是 只 读 的 。 在 HTML 4 之 前 的 版 本 中 如 果 直 接 在 页 面 上 编辑 文本 需要 编 
写 比 较 复杂 的 JavaScript 脚本 ， 但 是 在 HIML 5 中 只 要 指定 该 属性 的 值 即 可 。 

【实践 案例 2-4】 

在 Dreamweaver CS5 中 添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 div 元 素 和 类 型 
为 button 的 input 元 素 。 如 下 代码 主要 演示 了 如 何 使 用 该 元 素 的 属性 编辑 内 容 ， 以 及 单 击 
按钮 获取 编辑 后 的 内 容 : 


上 述 代码 中 单 击 按钮 时 触发 Click 事件 ， 在 JavaScript 脚本 函数 中 通过 innerHTML 获 
取 用 户 输入 的 内 容 ， 并 且 将 内 容 显示 到 ID 名 称 为 info 的 div 元 素 中 。ShowContentO 函 数 
的 具体 代码 如 下 所 示 : 


运行 本 示例 的 代码 并 编辑 内 容 进 行 测试 ， 测 试 效果 如 图 2-7 所 示 。 单 击 【 保 存 信 息 】 
按钮 显示 编辑 后 的 内 容 效 果 ， 如 图 2-8 所 示 。 


日 csntenteditahl* 属 性 的 简 : 口 eontenteditable 属 性 的 阐 .x 
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您 可 以 对 下 面 的 内 容 进 行 编辑 : 


给 每 一 条 河 每 一 座 山 取 一 个 温暖 的 名 字 
我 也 为 你 祝福 


司 你 有 一 个 灿 尼 的 前 香 


2-7 编辑 内 容 时 的 效果 


2.3.4 draggable 属性 


draggable 属性 用 来 指定 元 素 是 否 可 以 拖 动 ， 它 是 HTML 5 中 新 添加 的 属性 , 该 属性 经 
常用 于 拖 放 操作 ， 一 般 情 况 下 链接 和 图 像 是 可 拖 动 的 。 目 前 上 只 有 Firefox、Chrome 和 Safari 
浏览 器 支持 draggable 属性 。 

如 下 代码 演示 了 draggable 属性 的 简单 使 用 : 


如 果 想 要 真正 地 实现 拖 动 功能 ， 需 要 与 JavaScript 脚本 相 结合 ， 另 外 ， 
contextmenu 属性 和 dropzoe 属性 都 是 HTML 5 中 新 增加 的 全 局 属性 , 但 是 
目前 主流 的 浏览 器 都 没有 提供 对 它们 的 支持 。 


2.4 ”结构 元 素 


上 一 节 已 经 介绍 过 HTML 5 中 元 素 的 全 局 属性 ， 实 际 上 HTML 5 中 的 所 有 元 素 都 是 有 
结构 性 的 ， 且 这 些 元 素 的 作用 与 块 元 素 非常 相似 。 本 节 将 介绍 常用 的 结构 元 素来 帮助 读者 
进一步 了 解 HIML 5， 包 括 header、footer 和 article 等 元 素 。 

2.4.1 header 元 素 


header 元 素 是 HTML 5 中 新 添加 的 元 素 ， 该 元 素 用 来 定义 文档 的 页 眉 或 介绍 信息 。 如 
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网 站 首页 中 头 部 内 容 一 般 都 包含 标题 、Logo 图 片 和 搜索 内 容 等 ,使 用 该 元 素 可 以 替换 元 素 
使 用 的 “<div id="header">” 的 标记 。 
如 下 示例 代码 演示 了 header 元 素 的 简单 使 用 : 


<style> 


header{ 
margin:0 lpx lpx lpx; @ 
background:#467aa7; 
Color:#ffffff; 
} 
<style> 
<header> 
<h1> 夏 天 的 味道 </h1> 
<h2> 你 想 不 想 知道 夏天 的 味道 ? 它 是 甜 、 是 苦 、 是 涩 ……</h2> 
</header> 


运行 上 述 代码 ， 图 2-9 为 header 元 素 的 运行 效果 。 


图 2-9 header 元 素 使 用 效果 


2.4.2 article 元 素 


article 元 素 可 定义 独立 于 文档 的 其 余部 分 内 容 ， 它 表示 页 面 中 的 一 块 与 上 下 文 不 相关 
的 独立 部 分 。 该 元 素 经 常 使 用 的 例子 是 论坛 帖子 、 报 纸 文 章 和 用 户 评论 等 ， 它 通常 会 和 多 
个 section 元 素 进行 划分 ， 一 个 页 面 上 的 article 元 素 也 可 以 出 现 多 次 。 

如 下 示例 代码 演示 了 article 元 素 的 简单 使 用 : 


<style> 

articlef{ 
width:695px; 
float:right> 

} 

article h31{ 
display:block; 
height:30px; 
border-bottom:#C5C5A8 solid lpx; 
font:bold 28px/25px Arial, Helvetica, sans-serif; 
Color:#333333; 


background-color:inherit; 


ee 


上 述 代码 中 首先 创建 一 个 article 元 素 ， 而 article 元 素 中 又 添加 了 两 个 section 元 素 。 图 
2-10 为 使 用 该 元 素 时 的 运行 效果 。 


口 srtiele 元 素 的 使 用 
全 3 © 口 人 ile:///BE:/HTIL/article.htal 


郑州 欲 打造 公交 都 市 五 年 后 将 迈 入 全 空调 车 时 代 


选择 公交 年 出 行 ， 或 许 对 现在 的 市 民 来 说 ， 有 时 还 真 没 法 括 受 ，" 慢 `、` 挤 "、" 换 乘 不 方便 等 ， 


如 何 提高 公交 吸引 力 ? 在 《畅通 郑州 白皮书 2012~2014) 》 (征求 意见 稿 ) 发 布 后 ， 记 者 专访 了 郑州 市 公交 总 公司 副 
总 经 理 赵 青海 ， 畅 谈 公 交 提高 吸引 力 将 采取 的 一 些 措施 。 记 者 张 华 
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为 什么 是 西方 人 最 先 开始 赏 云 ? 

攻 时 从， 这 天 的 红云 夺 而 来 ， 合 得 林立 交 亲 充 贡 要 时 划 得 册 届 站。 二， 这 各 天空 的 风 归 ,有 时 村 
ne 
es 最 为 经 典 的 乳房 状 云 往往 出 现在 积 雨 美景 之 后 ， 很 可 能 是 一 场 迄 烈 的 暴风 


图 2-10 article 元 素 的 运行 效果 


2.4.3 aside 元 素 


aside 元 素 定义 其 所 处 内 容 之 外 的 内 容 ， 是 与 文档 主要 内 容 有 关 的 附属 信息 部 分 ， 它 可 
以 包含 当前 页 面 的 相关 其 他 引用 、 和 备注、 注释、 侧 边栏 和 广告 等 其 他 类 似 的 有 别 于 主要 内 
容 的 部 分 。 
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<aside> 提 供 最 新 、 最 全 的 Acer 笔记 本 资讯 </aside> 
</div> 
<!-- 省 略 其 他 代码 --> 


</header> 


图 2-11 为 aside 元 素 的 效果 图 。 


ssid 元 过 的 简单 使 用 Eee @ 
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Acer 淘 宝 站 


提供 最 新 、 最 全 的 Acer 笔 记 本 虎 讯 


图 2-11 aside 元 素 的 运行 效果 


2.4.4 footer 元 素 


footer 元 素 用 来 定义 section 或 document 的 页 脚 , 它 表示 一 个 页 面 或 者 一 个 区 域 的 底部 。 
- 般 情况 下 如 果 使 用 footer 来 插入 联系 信息 ,应 该 在 该 元 素 的 内 部 使 用 address 元 素 ; 在 典 
型 情况 下 ,该 元 素 会 包含 创作 者 的 姓名 、 文档 的 创作 日 期 或 者 联系 信息 等 内 容 。 使 用 footer 
元 素 可 以 替换 原来 页 面 中 的 “<div id="footer">” 标 记 。 
如 下 示例 代码 演示 了 footer 元 素 的 基本 使 用 : 


<footer> 
<div id="ftinner"> 
<div class="ftlink float-1"> 
<A href="aboutus.html"> 关 于 我 们 </A> | <A href="etrs.html"> 免 责 
声明 </A> | <A href="adver.html"> 广 告 合作 </A> | <A href= 
"knowledge .html"> 知 识 产权 </R> | <A href="payment .html"> 支 付 方式 
</A> | <A href="contactus.html"> 联 系 方式 </A> | <A href= 
"zhaopin.html"> 加 入 我 们 </A> 
<p id="copyright">(c) 2009. All Rights Reserved. </p> 
</div> 
<div class="valid folat-r"> 
<img src="images/xhtml .gif" alt="xhtml" /><img src="images/css 
gle alt=" cos /> 
</div> 
</div> 
</footer> 


图 2-12 为 footer 元 素 的 主要 运行 效果 。 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


图 2-12 ”footer 元 素 的 运行 效果 


2.5 交互 元 素 


上 一 节 介绍 了 HTML 5 中 经 常用 到 的 页 面 结构 元 素 的 相关 知识 ， 包 括 它 们 的 概念 、 作 
用 和 使 用 方法 等 。 本 节 将 详细 介绍 HTML 5 的 交互 元 素 ， 它 们 增强 了 页 面 与 用 户 的 交互 操 
作 ， 如 progress、menu、meter 和 command 元 素 等 。 


2.5.1 progress 元素 


progress 元 素 定 义 运行 或 下 载 中 的 进度 或 进程 , 该 元 素 经 常 和 JavaScript 脚本 一 块 使 用 
显示 耗费 时 间 的 函数 的 进度 。 
progress 元 素 的 常用 属性 值 有 3 个 ， 其 具体 说 明 如 下 所 示 。 
口 min 进度 条 的 最 大 值 。 
口 max 进度 条 的 最 小 值 。 
口 value 定义 进度 的 当前 值 。 
【实践 案例 2-5】 
下 面 通 过 一 个 案例 演示 progress 元 素 的 基本 使 用 。 本 示例 的 具体 步骤 如 下 所 示 。 
(1) 在 Dreamweaver CS5 中 添加 新 的 HIML 页 面 ， 然 后 在 页 面 的 合适 位 置 添加 div 元 
素 、p 元 素 、 类 型 为 button 的 input 元 素 、span 元 素 以 及 progress 元 素 等 。 页 面 body 部 分 
的 主要 代码 如 下 所 示 : 
<div> 
<header> 隐 形 的 翅膀 </header> 
<p> 每 一 次 都 在 徘徊 孤单 中 坚强 snbsp; snbsp;snbsp; 每 一 次 就 算 很 受伤 也 不 闪 泪 光 </p> 
<p> 我 知道 我 一 直 有 双 隐 形 的 翅膀 enbsp; sgnbsp; gnbsp; 带 我 飞 飞 过 绝望 </p> 
<!-- 省 略 其 他 代码 --> 
单 击 统计 网 友 喜 欢度 : <input type="button" value=" 统 计 " onClick="Btn 
Click()?™ /><br/S<br/> 
<span id="pTip"> 统 计 进 度 (喜欢 度 ) </span> 
<progress id="objprogress" min="0" max="10" value="8"> 正 在 统计 .。 
</progress> 
</div> 


上 述 代码 中 header 元 素 定 义 歌 曲 的 标题 ， 多 个 p 元 素 用 来 显示 详细 歌词 ;progress 元 


素 显示 网 友 对 本 首 歌曲 的 热爱 度 。 
(2) 单 击 【统计 】 按 钮 时 触发 按钮 的 Click 事件 调用 JavaScript 脚本 函数 Btn_Click0， 
其 具体 的 脚本 代码 如 下 所 示 : 


上 述 代 码 中 Btm_ClickO 函 数 首先 调用 内 置 的 函数 setInterval0)， 每 1 秒 调 用 一 次 
Interval handlerO) 函 数 。 在 该 函数 中 判断 进度 条 的 显示 情况 ， 如 果 进 度 条 完成 则 调用 内 置 函 
数 clearInterval0 清 空 setInterval0 中 的 内 容 ， 并 将 进度 条 的 满意 度 的 值 设 置 为 8。 

(3) 运行 本 示例 代码 , 单 击 【 统 计 】 按 钮 进行 测试 , 显示 进度 条 时 的 运行 效果 如 图 2-13 
所 示 。 
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隐形 的 起 性 
拇 一 次 都 在 天 得 莪 单 中 坚强 。 每 一 次 就 算 根 受伤 也 不 门 当 光 
我 知道 我 一 直 有 邓 隐 形 的 起 适 。 带 我 闵 飞 过 绝望 
不 去 起 她们 天 有 美丽 的 太阳 。 我 看 见 每 天 的 夕阳 也 会 有 去 化 
我 知道 我 一 直 有 邓 隐 形 的 粗壮。 带 我 飞 给 我 希望 
我 终于 看 到 所 有 欧 想 都 开花 。 追逐 的 年 轻 歌声 多 嘻 亮 
我 终于 鲍 疼 用 心 凝望 不 害怕 。 呢 里 会 有 风 就 飞 多 远 吧 


单 击 统计 亲友 喜欢 度 : [统计 ] 
正 芷 绵 Hrx 


2-13 ”progress 元 素 的 运行 效果 


2.5.2 ”meter 元 素 


meter 元 素 定义 度量 衡 ， 表 示 指 定 范围 内 的 数值 。 例 如 磁盘 的 使 用 量 、 投 票 人 数 、 投 
票 分 数 及 上 传 文档 的 等 级 评分 等 。 

meter 元 素 中 包含 多 个 常用 的 属性 值 ， 如 max 属性 定义 最 大 值 ，min 属性 定义 最 小 值 。 
表 2-1 列 出 了 该 元 素 属性 值 的 具体 说 明 。 


表 2-1 meter 元 素 的 常用 属性 


max 定义 最 大 值 ， 默 认 值 为 1 

min 定义 最 小 值 ， 默 认 值 为 0 

high 定义 量度 的 值 位 于 哪个 点 ， 被 界定 为 高 的 值 

low 定义 量度 的 值 位 于 哪个 点 ， 被 界定 为 低 的 值 

optimum ”定义 什么 样 的 度量 值 是 最 佳 的 值 ， 如 果 该 值 高 于 high 属性 则 表示 值 越 高 越 好 
Value 定义 度量 的 值 


【实践 案例 2-6】 
在 Dreamweaver CS5 中 添加 新 的 HTML 页 面 ， 然 后 在 页 面 的 合适 位 置 添加 div 元 素 、 
类 型 为 input 的 button 元 素 及 meter 元 素 等 。 页 面 的 主要 代码 如 下 所 示 : 


上 述 代码 中 声明 了 3 个 meter 元 素 并 分 别 指定 该 元 素 的 max、min、value、high、low 
及 optimum 等 属性 ， 评 分 范围 在 0 一 10 之 间 ， 分 数 低 于 6 为 不 喜欢 ， 高 于 8 被 认为 很 喜欢 
这 首 歌 ， 评 分 为 10 是 最 理想 的 分 数 。 单 击 按钮 时 触发 Click 事件 ， 该 事件 主要 显示 网 友 的 
评分 。 

运行 本 示例 的 代码 单 击 【查看 网 友 评分 】 按 钮 进行 测试 ， 鼠 标 放 到 页 面 时 可 以 查看 该 
用 户 的 评分 ， 最 终 效果 如 图 2-14 所 示 。 


不 去 想 他们 多 有 灶 丽 的 太阳 。 我 看 见 每 天 的 夕阳 也 会 有 变化 
我 知道 我 一 直 有 邓 隐 形 的 粗 笠 。 带 我 飞 给 我 名 望 
我 终于 看 到 所 有 欧 想 玫 开花 “追逐 的 年 径 歌声 多 嘻 亮 


我 终于 元 类 用 心 北 旺 不 害怕 。 哪里 会 有 风 就 飞 多 远 吧 


图 2-14 meter 元 素 的 运行 效果 


2.5.3 ”details 元 素 和 summary 元 素 


details 元 素 和 summary 元 素 都 是 HTML 5 中 新 添加 的 元 素 ，details 元 素 用 来 描述 文档 
或 文档 某 个 部 分 的 细节 ，summary 元 素 包含 details 元 素 的 标题 。 这 两 个 元 素 配 合 使 用 可 以 
为 details 定义 标题 ， 标 题 是 可 见 的 ， 用 户 单 击 标题 时 会 显示 出 details 元 素 中 的 内 容 。 

details 元 素 中 包含 open 属性 ， 该 属性 定义 details 是 否 可 见 。 其 属性 值 为 布尔 类 型 ， 默 
认 情 况 下 为 false。 如 果 用 户 希 望 一 打开 页 面 就 显示 details 元 素 的 隐藏 内 容 则 将 该 值 设置 为 
true 即 可 。 

【实践 案例 2-7】 

本 案例 主要 利用 details 元 素 和 summary 元 素 实 现 左 侧 菜 单 的 显示 功能 , 实现 该 功能 的 
主要 步骤 如 下 : 

(1) 在 Dreamweaver CS5 中 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 details 元 
素 、summary 元 素 、 吉 元素 及 开元 素 等 。 页 面 加 载 时 显示 第 一 个 details 元 素 中 的 内 容 ， 将 
open 的 属性 值 设置 为 tue。 其 页 面相 关 代 码 如 下 所 示 : 


(2) 为 页 面 的 details 元 素 及 ul 和 下 元 素 添加 样式 代码 ， 有 具体 代码 如 下 所 示 ; 


(3) 运行 本 案例 的 代码 ， 图 2-15 为 该 案例 的 效果 图 。 


D smiee -| 
3 CC Die://E:/sm /ahdetatls_ snary, bial 
和 面试 扶 巧 和 注意 事项 


1 全 拉 有 有限 信 志 他 汐 和 于 汕 所 后 ， 一 定 委 提 和 5-10 委 名 内 于 光 二， 避 寺 于 说 9 法 玫 ， 络 坟 
[和 司 ， 届 出 克 下 忆 芍 (去 ， 作 一 上 条 生 的 记者 汗 机。 以 各 人 上天， 人 划 对。 为了 条 
这 一 吉 一 二 本 二 放下 一手。 


图 2-15 ”details 元 素 和 summary 元 素 的 运行 效果 


2.5.4 menu 元 素 


在 HTML 5 的 交互 元 素 中 除了 内 容 交 互 元 素 外 ， 频 繁 使 用 的 还 有 菜单 交互 元 素 ( 如 


menu 和 command)。 本 节 和 下 一 节 将 详细 介绍 这 两 个 元 素 的 基本 使 用 。 

menu 元 素 定义 菜单 列表 ， 如 果 用 户 希望 列 出 表单 中 的 控件 可 以 使 用 该 元 素 。 它 是 
HTML 5 重新 启用 的 一 个 旧 标 记 ， 该 元 素 在 HTML 2 时 就 已 经 存在 ， 但 是 在 HTML 4 时 曾 
被 废弃 。 在 HTML 5 中 重新 恢复 使 用 并 赋予 其 新 的 功能 含义 ， 它 常常 和 1 列表 元 素 结合 使 
用 ， 来 定义 一 个 列表 式 的 菜单 。 

menu 元 素 中 包含 3 个 常用 的 属性 ， 其 属性 的 具体 说 明 如 表 2-2 所 示 。 


表 2-2 ”menu 元 素 的 常用 属性 


autosubmit ”如果 该 值 为 tue， 表 示 当 表单 控件 改变 时 会 自动 提交 


label 为 菜单 定义 一 个 可 见 的 标注 
type 定义 显示 哪 种 类 型 的 菜单 ， 其 值 包括 list (默认 值 )、context 和 toolbar 
【实践 案例 2-8】 


本 案例 将 menu 元 素 和 元 素 相 结合 实现 浏览 器 图 标 列表 的 显示 功能 ， 实 现 该 功能 的 
主要 步骤 如 下 : 

(1) 在 Dreamweaver CS5 中 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 menu 元 素 
和 下 元素， 页 面 的 相关 代码 如 下 : 


(2) 为 menu 元 素 及 子 元 素 添加 相关 的 代码 ， 主 要 代码 如 下 : 


(3) 运行 本 示例 的 代码 进行 测试 ， 图 2-16 为 本 案例 的 效果 图 。 


后 3 © 口 file:///E:/HTIL/jiaochu/aenu htal 


这 些 浏览 器 的 图 标 ， 你 知道 吗 ? 


@ ) Mozilla Firefox (火狐 浏览 器 
y 


€ 和 Google chrone ( 答 歌 浏 用 各) 


全 Internet Explorer (IE 浏 览 器 ) 


名 opera ( 欧 胃 济 帮 器) 


图 2-16 ”menu 元 素 的 运行 效果 


2.5.5 command 元 素 


command 元 素 是 HTML 5 中 新 增加 的 元 素 ， 它 表示 能 够 调用 的 命令 ， 并 且 用 户 可 以 定 
义 命 令 按钮 ， 如 单 选 按钮 、 复 选 框 或 按钮 等 。 只 有 当 command 元 素 位 于 menu 元 素 时 该 元 
素 才 是 可 见 的 ， 否 则 不 会 显示 这 个 元 素 ， 但 是 可 以 用 它 规定 键盘 快捷 键 。 表 2-3 列 出 了 该 
元 素 常用 属性 的 具体 说 明 。 


表 2-3 command 元 素 的 常用 属性 


checked ”定义 是 否 被 选中 ， 仅 用 于 radio 或 checkbox 类 型 

disabled 。 ”定义 command 是 否 可 用 

icon 定义 作为 command 来 显示 的 图 像 url 

label 为 command 定义 可 见 的 label 

radiogroup ”定义 command 所 属 的 组 名 ， 仅 在 类 型 为 radio 时 使 用 

type 定义 该 command 元 素 的 类 型 ， 它 的 值 包括 checkbox、command (默认 值 ) 和 radio 


下 面 这 段 代 码 演示 了 command 元 素 的 基本 使 用 : 


2.6 文本 层次 语义 元 素 


一 般 情况 下 为 了 使 HTML 页 面 中 的 文本 内 容 更 加 形象 生动 , 需要 使 用 一 些 特殊 的 元 素 
来 突出 文本 之 间 的 层次 关系 ,这些 特殊 的 元 素 就 称 为 层次 语义 元 素 。 文 本 层次 语义 元 素 主 
要 包括 cite 元 素 、mark 元 素 和 time 元 素 ， 本 节 将 详细 介绍 这 些 元 素 的 具体 使 用 ， 包 括 它 
们 的 概念 、 内 容 和 使 用 方法 等 。 


2.6.1 _cite 元 素 


cite 元 素 可 以 创建 一 个 引用 标记 ， 用 于 文档 中 参考 文献 的 引用 说 明 。 开 发 人 员 可 以 使 
用 该 元 素 定义 作品 〈 如 书籍 、 歌 曲 、 电 影 、 电 视 节 目 、 绘 画 和 雕塑 等 等 ) 的 标题 ， 一 旦 在 
文档 中 使 用 了 该 标记 ， 被 标记 的 文档 内 容 将 以 斜体 的 样式 展示 在 页 面 中 ， 以 区 别 于 段落 中 
的 其 他 字符 。 

【实践 案例 2-9】 

本 案例 首先 通过 p 元 素 显示 一 段 文字 ， 然 后 在 该 段落 的 下 面 使 用 cite 元 素 标识 这 段 文 
字 。 实 现 该 功能 的 主要 步骤 如 下 所 示 : 

(1) 在 Dreamweaver CS5 中 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 p 元 素 和 
cite 元 素 ， 它 们 分 别 用 来 显示 段落 文字 和 标识 引用 的 文档 名 称 。 页 面具 体 代 码 如 下 : 


(2) 为 页 面 中 的 cite 元 素 和 op 元 素 分 别 添加 样式 ， 相 关 样 式 代码 如 下 所 示 : 


(3) 运行 本 示例 的 代码 查看 页 面 效 果 ， 最 终 运行 效果 如 图 2-17 所 示 。 


也 改变 不 了 我 对 生活 的 热 受 ， 


音 二 部 片 妾 薄 尘 薄 尘 薄 举 薄 证 举 


微笑 着 走向 火热 的 生活 。 
一 摘自 汪 国 真 (过 禾 医者 走 庙 华声 ) 


2.6.2 mark 元 素 


mark 元 素 定 义 带 有 记号 的 文本 ， 其 主要 功能 是 在 文本 中 高 亮 显示 某 个 或 某 几 个 字符 ， 
旨 在 引起 用 户 的 特别 注意 。mark 元 素 的 使 用 方法 与 em 和 strong 有 相似 之 处 ， 但 是 相 比 而 
言 ， 使 用 mark 元 素 在 突出 显示 时 样式 更 加 随意 与 灵活 。 

【实践 案例 2-10】 

下 面 通过 一 个 示例 演示 mark 元 素 的 基本 使 用 。 

在 本 案例 中 首先 通过 center 元 素 指 定 标 题 “ 掩 耳 盗 铃 ” 的 出 现 位 置 ， 然 后 通过 pp 元素 
显示 这 则 小 寓言 的 具体 内 容 。 为 了 引起 用 户 的 注意 并 突出 该 寅 言 的 主题 ， 显 示 寓 言 时 使 用 
mark 元 素 高 亮 处 理 字 符 “ 钟 ” 页 面 的 主要 代码 如 下 : 


上 述 代码 通过 使 用 mark 元 素 将 文字 内 容 中 的 “ 钟 ”进行 了 高 亮 显示 处 理 ， 读 者 也 可 
以 直接 通过 style 定义 该 元 素 的 样式 。 图 2-18 为 该 元 素 的 运行 效果 。 


图 2-18 mark 元素 的 运行 效果 


虽然 mark 元 素 在 使 用 效果 上 与 em 和 strong 元 素 有 相似 之 处 , 但 三 者 的 出 发 点 是 不 一 
样 的 。strong 元 素 是 作者 对 文档 中 某 段 文字 的 重要 性 进行 强调 ; em 元 素 是 为 了 突出 文章 的 
重点 而 进行 的 设置 ，mark 是 数据 展示 时 以 高 亮 的 形式 显示 某 些 字符 ， 与 原作 者 本 意 无 关 。 
重新 更 改 本 案例 的 代码 ， 在 本 则 寓言 的 首 段 中 分 别 通过 em 和 strong 元 素 对 第 一 句 和 第 三 
名 内 容 进行 设置 ， 主 要 代码 如 下 : 


重新 运行 


SC Ofile:///E:/HTHL/cengciyuyi/nark. htal 


图 2-19 使 用 em、strong 和 matk 元 素 的 运行 效果 


mark 元 素 的 高 亮 显示 的 特征 ,， 除了 用 于 文档 中 外 ,还 常常 用 于 查看 搜索 结 
果 页 面 中 关键 字 的 高 亮 显示 ， 也 是 为 了 引起 用 户 的 注意 。 


2.6.3 time 元 素 


与 cite 元 素 和 mark 元 素 一 样 ，time 元 素 也 是 HTML 5 中 新 添加 的 元 素 。 该 元 素 可 以 
定义 公历 时 间或 日 期 ， 时 间 和 时 区 偏 移 是 可 选 的 。time 元 素 能 够 以 机 器 可 读 的 方式 对 日 期 
和 时 间 进 行 编码 ， 例 如 用 户 代理 能 够 把 生日 提醒 或 排 定 的 事件 添加 到 用 户 日 程 表 中 ， 搜 索 
引擎 也 能 够 生成 更 智能 的 搜索 结果 。 


time 元 素 包 括 两 个 属性 : datetime 和 pubdate。datetime 属性 定义 相应 的 时 间或 日 期 ; 
pubdate 属性 定义 是 否 为 该 元 素 发 布 日 期 。 
如 下 代码 定义 了 time 元 素 的 常用 方法 : 


上 述 代码 中 页 面 解析 时 获取 time 元 素 datetime 的 值 , 而 元 素 之 间 的 内 容 用 于 显示 在 页 
面 中 。 第 一 个 time 元 素 表示 日 期 ， 第 二 个 time 元 素 表 示 日 期 和 时 间 ， 它 们 之 间 使 用 T 进 
行 分 隔 。 如 果 在 整个 日 期 与 时 间 后 面 加 上 一 个 字母 Z， 则 表示 获取 UTC (世界 统一 时 间 ) 
格式 ， 第 三 个 time 元 素 表示 将 来 时 间 ， 最 后 一 个 time 元 素 表示 显示 为 发 布 日 期 。 


2.7 页 面 节 点 


HTML 5 中 新 添加 了 许多 页 面 节点 元 素 ， 这 些 元 素 可 以 用 于 页 面 内 容 的 分 段 或 分 区 。 
如 nav 元 素 可 以 显示 一 组 导航 链接 、address 元 素 可 以 设置 文档 的 版 权 信息 等 。 下 面 将 详细 
介绍 页 面 节 点 元 素 的 基本 使 用 。 


2.7.1 section 元 素 


section 元 素 用 于 标记 文档 中 的 区 段 或 段落 ， 例 如 文章 中 的 章节 、 页 眉 或 页 脚 的 设置 。 
一 个 section 元 素 通常 是 一 个 有 主题 的 内 容 组 ， 前 面 有 一 个 header 元 素 ， 后 面 跟 一 个 footer 
元 素 ， 另 外 section 元 素 也 可 以 嵌 套 使 用 。 

section 元 素 除 了 通用 的 hidden、contenteditable 和 draggable 等 属性 外 ， 该 元 素 还 包括 


另外 一 个 cite 属性 ， 该 属性 定义 内 容 来 源 的 URL 地 址 。 如 下 示例 代码 演示 了 section 元 素 
的 基本 使 用 : 


上 述 代码 创建 了 3 个 可 编辑 的 section 元 素 ， 每 个 元 素 中 包含 两 个 元 素 : h4 元 素 显示 
标题 ，p 元 素 对 标题 进行 说 明 。 图 2-20 为 使 用 该 元 素 的 效果 图 。 


€ 3 CC Dfile:///E:/HTIL/jiedian/section htal 


陈 含 
女 ， 汉 旗 ，18 岁 ， 喜 欢 唱歌 ， 跳 舞 和 画 画 
王 前 
3 汉族 ，22 岁 ， 喜 欢 唱歌 、 息 山 、 路 步 和 打 羽 毛 


图 2-20 ”section 元 素 的 运行 效果 


2.7.2 nav 元 素 


nav 元 素 是 HTML 5 中 新 增加 的 一 个 元 素 ， 它 是 页 面 的 导航 元 素 ， 定 义 了 导航 链接 部 
分 的 内 容 。 该 元 素 可 以 将 具有 导航 性 质 的 链接 归纳 在 一 块 区 域 中 ， 使 页 面 的 元 素 更 具有 语 
义 性 ， 同 时 方便 了 对 屏幕 阅读 器 设备 的 支持 。 

下 面 的 示例 代码 演示 了 nav 元 素 的 简单 使 用 : 


上 述 代码 创建 了 一 个 导航 区 域 ，nayv 元 素 包含 了 4 个 用 于 导航 的 超 链接 ， 可 以 作用 于 
全 局 导航 ， 也 可 放 在 某 个 段落 中 作为 区 域 导航 。 当 单 击 不 同名 著 的 图 书 名 称 时 可 以 调用 
JavaScript 脚本 查看 当前 图 书 的 详细 简介 , 并 且 将 其 他 图 书 的 简介 内 容 隐 藏 。 具体 运行 效果 
如 图 2-21 所 示 。 


€ 3 CC 0 file:///E:/HTL/jiedian/nav.htals 


《三 国 演义 》 《水 浒 传 》 《红楼 梦 》 
ed oh de eee ie I 
辆 讷 作 ) 基础 上 促 作 而 成 。 西 游记 前 七 加 叙述 孙悟空 
Et 人 


Ee 昌国 上 信和 计 这 


作者 景 承 恩 ( 约 1504 年 - 约 1582 年 )， A 号 射 阳 山 人 ， ee 
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HTML 5 中 只 要 是 导航 性 质 的 链接 就 可 以 将 其 放 入 nav 元 素 中 ， 该 元 素 可 
以 在 一 个 文档 中 多 次 出 现 ， 作 为 页 面 或 部 分 区 域 的 导航 。 例 如 ， 如 果 文档 
中 有 “前 后 ”按钮 ， 也 可 以 将 它们 放 到 nav 元 素 中 。 


2.7.3 hgroup 元 素 


hgroup 元 素 用 于 对 页 面 的 标题 进行 分 组 ， 从 而 形成 一 个 组 群 。 为 了 更 好 地 说 明 各 组 群 
的 功能 ， 该 元 素 常常 与 figcaption 结合 使 用 。figcaption 元 素 定义 figure 元 素 的 标题 ， 该 元 
素 应 该 置 于 figure 元 素 的 第 一 个 或 最 后 一 个 子 元 素 的 位 置 。 

下 面 这 段 代 码 演示 了 hgroup 元 素 和 figcaption 元 素 的 基本 使 用 : 


上 述 代码 通过 hgroup 元 素 创建 了 两 个 标题 组 ， 然 后 分 别 通过 figcaption 元 素 指定 标题 
组 名 称 。 第 一 个 hgroup 元 素 包含 了 中 国名 著 信息 ， 第 二 个 hgroup 元 素 显 示 国 外 的 名 著 信 
息 ， 然 后 通过 first-child 选择 器 设置 第 一 个 hgroup 元 素 的 样式 。 最 终 运行 效果 如 图 2-22 
所 示 。 


€ 3 GD fe://E/um /jedan/hsroup. btnl 


引 全 全 则 传说 ;2 全 ， 汪 本， 结 公 卫 寺 拉 4 三 去》 克 肝 所 议 


的 120 本 本 。 3 三 对 
让 国生 一 5 攻守 上 伯 沾 这 


1 水 济 伟 是 自作 寺 在 《 训 和 这 学 } 必要 关 话 本 、 帮 于 的 闪 斋 上 人 
本 和 
寺 伦 、 补 让 全 只 未 守 衬 山 二 淮 ， 避 地 了 兰 对 第 社会 于 乔 。 闪 和 
和 


sn 

下 和 人 生生 本 nt 二 
| 的 开 二 大海 主导 地 的 从 和亲， 各 已 昌 这 
全 和 基因 后 庆生 和 全 《他 有 办 本 下 太 寺 约 和 


， 立 下 于 得 荡 ， 于 下 站 的 ， 首 交趾 一 各 这 末 计 。 
玖 其 六 种 人 入 的 自由 外 学 ， 庆 味 T 术 兴 作 各 中 级 
2 有 生机 7 欠条 到， 
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2.7.4 address 元 素 


address 元 素 用 来 定义 文档 作者 或 拥有 者 的 相关 联系 信息 , 它 常 常 位 于 article 元 素 的 外 


部 。 如 果 该 元 素 位 于 article 元 素 的 内 部 , 则 表示 文章 作者 的 联系 方式 , 一 般 情况 下 将 address 
元 素 添加 到 网 页 的 头 部 或 底部 。 

address 元 素 通常 情况 下 显示 为 斜体 , 绝 大 部 分 的 浏览 器 在 解析 该 元 素 时 都 会 在 该 元 素 
的 前 后 增加 换行 标记 。 如 下 示例 代码 演示 了 address 元 素 的 使 用 方法 : 


上 述 代码 中 首先 通过 h2 元 素 声明 了 一 个 标题 ， 然 后 使 用 p 元 素 显示 具体 内 容 ， 最 后 
通过 footer 元 素 和 address 元 素 显示 文档 的 详细 信息 。 如 图 2-23 为 本 示例 的 运行 效果 。 


© 3 © file:///E:/HTIL/jiedian/address.htal 


关于 《孙子 兵法 》， 你 又 了 解 多 少 ? 


， ) 其 内 容 博大 精深 ， 思 想 精 演 富 
赂 ， 逮 辑 顷 名 产 证 。 作 者 为 春秋 未 年 的 齐 国人 孙武 字 长 婴 ) 。 


我 让 更 多 的 卿 并 信息 请 合并 记 左 幸 


2.8 ”分 组 元 素 


与 HTML 4 之 前 的 版 本 相 比 ，HTML 5 对 原 有 的 分 组 元 素 (如 世 、ol 和 dl) 进行 了 改 
良 ， 有 的 元 素 增加 了 许多 新 的 属性 ， 有 的 元 素 废除 了 一 些 不 合理 的 原 有 特征 。 本 节 将 详细 
介绍 这 些 元 素 的 使 用 方法 。 


2.8.1 ul 元 素 


蕊 元 素 用 于 定义 页 面 中 的 无 序列 表 , 它 常 常 和 II 元素 一 块 使 用 oul 元 素 的 用 法 与 HIML 
4 相似 , 但 是 在 HIML 5 中 不 再 支持 type 属性 和 compact 属性 ; 同时 也 不 支持 开元 素 的 type 
属性 ， 开 发 人 员 可 以 使 用 CSS 样式 来 定义 列表 的 类 型 。 

下 面 代码 使 用 ul 元 素 创 建 一 个 列表 ， 接 着 向 列表 中 添加 一 些 元素。 具体 内 容 如 下 
所 示 : 


. ( 海 氢 站 
。 中 岳山 山 〈 海 拔 1492 米 ) : 


2-24 ul 和英 元 素 的 运行 效果 


2.8.2 ol 元 素 


与 纪元 素 创 建 的 无 序列 表 相反 , ol 元 素 用 来 创建 有 序列 表 。 它 的 用 法 与 HIML 4 相似 ， 
世 元 素 同 样 在 HTML 5 中 不 支持 type 属性 和 compact 属性 且 该 元 素 常常 和 1 元 素 一 块 使 
用 实现 有 序列 表 。 

HIML 5 中 对 HIML 4 版 本 之 前 的 ol 元 素 功能 进行 了 增强 ， 不 仅 可 以 显示 有 序列 表 ， 
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还 增加 了 start 属性 和 reversed 属性 。 其 中 start 属性 可 以 更 改 列表 编号 的 起 始 值 ,使 用 代码 
如 下 所 示 : 


<p>gnbsp; gnbsp; gnbsp; gnbsp; 秋 季 吃 什么 水 果 好 ?秋季 是 盛产 水 果 的 季节 ， 但 是 很 多 人 又 不 
知道 到 底 吃 什么 才 是 最 具 营 养 最 健康 的 。</p> 
<ol start="2"> 
<1i> 柚 子 : 营养 专家 说 ， 每 100 克 柚子 中 碳水 化 合 物 的 含量 较 其 他 水 果 低 出 不 少 ， 糖 尿 病 和 【59) 
肥胖 患者 可 适当 多 吃 柚子 </1i> 
<1i> 鲜 惠 : 鲜 惠 有 健 润 脾胃 、 养 血 、 补 气 的 功效 ， 相 比较 其 他 秋季 水 果 ， 它 的 维生素 C、 钊 、 
镁 等 含量 均 较 高 。 束 偏 热 普通 人 一 天 吃 8 到 10 个 就 可 以 了 ， 痰 多 、 便 秘 、 腹 部 胀气 的 人 ， 经 
期 的 女性 ， 胃 病 患者 和 糖尿 病 患者 都 不 适宜 多 吃 。</1i> 
<1i> 石 榴 : 石榴 每 百 克 含 4.8 克 可 食用 膳食 纤维 。 另 外 ， 它 含有 的 膳食 纤维 具有 水 溶性 ， 在 
人 体 消 化 道中 不 会 被 酶 分 解 ， 既 可 以 防止 便秘 ， 又 能 缓解 腹泻 。</1i> 
<1i> 板 栗 : 板栗 是 补肾 强 骨 之 果 ， 它 含有 的 矿物 质 有 钾 、 镁 、 铁 、 锌 等 ， 其 中 钾 元 素 的 含量 
很 "突出 "， 板栗 很 适合 高 血压 患者 食用 ，</1i> 


</ol> 


reversed 属性 表示 是 否 对 列表 进行 反 向 排序 ， 默 认 值 为 tue。 重 新 向 ol 元 素 中 添加 该 
属性 ， 主 要 代码 如 下 所 示 : 


<ol start="2" reversed> 


<!-- 省 略 其 他 内 容 的 显示 --> 
</ol1> 
分 别 运 行 ol 元 素 使 用 start 属性 和 reversed 属性 时 的 代码 查看 效果 ,具体 效果 如 图 2-25 
和 图 2-26 所 示 。 


] ,元 和 使 用 
€ FC Dsle///E:/aT/fenzw/ol.ntd 


区 夫人 各 村 和 队 过 是 区 产 涉 果 村， 全 站 恨 多 人 又 不 这 到 区 省 二 是 了 


秋季 应 什么 水 果 弛 ? 季 是 卫 产 水 果 的 季节 ， 旧 是 候 杀 人 又 不 知 着 到 恬 吃 什么 才 是 好 
具 窜 尖 是 休 康 并 最 他 


上 
水 化 言 和 的 全 量 统 其 全 水 果 全 出 不 少 , 弟 尿 


图 2-25 start 属性 的 运行 效果 图 2-26 ”reversed 属性 的 运行 效果 


可 以 通过 山 或 ol 元素 的 list-style-type 属性 设置 任何 无 序列 表 下 可 设置 的 
值 ， 大 部 分 情况 下 有 序列 表 要 么 前 面 是 递增 数值 , 要 么 前 面 没 有 任何 标记 。 
不 建议 使 用 有 序列 表 实 现 类 似 于 无 序列 表 的 表现 ， 如 果 这 样 有 序列 表 本 身 
的 意义 就 不 正确 了 。 


2.8.3 dl 元 素 


dl 元 素 是 专门 用 来 定义 术语 的 列表 元 素 ， 它 常常 结合 由 《定义 列表 中 的 项 目 ) 元 素 和 
dd 元 素 〈 描 述 列 表 中 的 项 目 ) 一 块 使 用 。 其 用 法 与 HIML 4 中 相似 ，HTMEL 5 中 对 该 元 素 
进行 了 改良 ， 它 允许 在 一 个 dl 元 素 中 包含 多 个 带 名 字 的 术语 dt 元 素 ， 每 个 术语 元 素 后 面 
可 以 跟 一 个 或 多 个 定义 元 素 dd， 并 且 术 语 元 素 dt 与 定义 元 素 dd 都 不 允许 重复 出 现 。 

下 面 的 示例 代码 演示 了 dl 元 素 在 网 页 上 的 简单 用 法 : 


最 新 电影 
敢死队 〈 它 是 由 西 尔 维 斯 特 。 史 特 龙 自 编 、 自 导 、 自 演 的 美国 动作 片 。) 
逆 战 〈 它 是 由 香港 导演 林 超 货 执导 的 一 部 枪 | 
黄金 大 动 案 ( 它 是 2012 年 宁 洁 导 演 的 一 部 喜剧 、 动 作 、 久 险 、 剧 情 片 。) 


图 2-27 dl 元 素 的 运行 效果 


2.9 项 目 案例 : 设计 旅游 网 站 首页 


HTML 5 的 出 现 使 页 面 结构 更 加 清晰 、 表 达 的 语义 更 加 明确 、 且 在 最 大 程度 上 保证 页 


面 的 简洁 性 ， 但 是 并 非 在 页 面 中 使 用 HTML 5 元 素 越 多 越 好 。 在 本 节 之 前 已 经 通过 大 量 的 
实践 案例 讲解 了 HIML 5 中 新 增加 的 全 局 属性 和 元 素 ， 如 header 元 素 、footer 元 素 、menu 
元 素 、nav 元 素 及 元 素 等 。 本 节 将 通过 常用 的 HTML 5 元 素 设计 网 站 首页 ， 加 深 读者 对 
这 些 元 素 及 HIML 5 的 理解 。 

【实例 分 析 】 

随 着 社会 经 济 的 不 断 发 展 ， 旅 游 越 来 越 成 为 大 家 放松 心情 减少 压力 的 一 个 选择 ， 本 节 
项 目 案例 主要 使 用 新 增加 的 HIML 5 元 素 实现 设计 旅游 网 站 首页 的 功能 。 网 站 首页 内 容 非 
常 简 单 且 便 于 理解 ， 其 最 终 运行 效果 如 图 2-28 所 示 。 


de zh 


i | 


快捷 列表 夏季 外 出 旅游 五 注意 六 度 ， 夏 日 旅行 社 
酒店 列表 炎炎 夏 日 仍 基 挡 不 住 外 出 苦 叶 的 人 的 热情 ， 著 么 在 这 个 炎热 的 夏季 et 
美 图表 和 出世 随和 注意 此 什么 哆 ? 开放 行 社 , 主要 办事 招 

1。， 炎 要 的 夏天 不 宜 长 叶 间 做 日 光 浴 ， 轩 让 活动 要 窒 防 风神 ， 委 上 办 徕 和 接 竺 境外 旅游 者 来 

数 才 参加 华 观光 ,组织 中 国 公民 
客户 留言 一， 基于 到 下 于 3 时 迷 外 殷 最 琢 、 杀伤 力 最 大 ， 这 段 时 间 要 尽量 上 
一 23， 凡 昌 项 20 分 时 ， 厅 池 防 晒 吉 在 时 下 要 字 时 了 下 于 、 下 上 
旅游 注意 事项 避 ， 征 人 地方 外 和 要 出 多 开水 全 把 了 号 放 挤 ， 应 该 和 摧 。 六 
全 本 和 庆生 和 内 该: 日 部 

去 4. 床 ， 头 类 也 应 防晒， 在 夏季 游 时 ， 最 好 棕 把 遮阳 什 或 起 欧美 部 、 亚 大 部 、 轩 内 

. 急 SD i 
二 .0371- 
5 定 玉 生肖 及 陵 人 过 纲 再 生 他 修 流 注 近 ;过 有 热 水 济 法 和 丙 次 。 关机 :199998327865 
卫 卫 ;同时 ， 不 要 煌 人 的 所 陪 ， 以 免 组 商 夺 妆 政 久 F 放 度 ME 


-~- 撞 选 自 『 冯 入 莽 内 局》 
发 表 日 期 ，2012- 10- 12 评论 数量 ，23 
一 起 走 进 中国 十 大 进 嗜 旅游 城市 扒 &， 


酷热 的 局 夏 ， 清 谅 何 处 村? 匠 炎 夏 日 ， 涉 关 知 注 日 益 成 为 中 外 多 
游 者 ， 远 足 出 行 迄 择 习 的 地 的 首要 诉求 。 


让 331 人 的 有 贵阳 市 、 民明 市 、 哈 尔 
乌 市 、 开 市 、 六 瘟 水 市、 承德 市 、 玉 溪 市 、 以 红 兴 
4 全 让 人 计 中 有 四 字 后生 人 ， 滇池 治理 水 
质 好 、 交 通 环境 有 明显 改善 而 在 相持 度 与 贵阳 并 列 榜 | 
发 表 日 期 ，2012- 10- 12 评论 数量 : 


公告 查看 | 关于 我 们 | 联系 委 们 | 详细 地 图 | 加 入 我 们 | 


2-28 ”旅游 首页 最 终 效 果 


实现 网 站 首页 的 主要 步骤 如 下 所 示 : 

(1) 首先 对 网 站 首页 的 页 面 划分 区 域 ， 目 前 采用 比较 主流 的 框架 ， 将 整个 页 面 分 为 上 、 
中 、 下 3 个 大 的 区 域 ， 其 中 又 将 中 间 区 域 划 分 为 左 、 中 、 右 3 个 部 分 ， 页 面 的 整体 结构 框 
架 如 图 2-29 所 示 。 

(2) 页 面 head 部 分 中 分 别 定义 meta 元 素 和 title 元 素 ，meta 元 素 用 于 定义 页 面 的 编码 
格式 ，title 元 素 定 义 页 面 的 标题 。 具 体 代码 如 下 所 示 : 


(3) 在 title 元 素 下 方 添加 两 个 link 元 素 , 该 元 素 为 当前 页 面 引用 一 个 外 部 CSS 样式 表 ， 
并 且 添 加 一 个 图 标 。 具 体 代码 如 下 所 示 : 


2-29 页 面 划分 整体 结构 


(4) 上 面 的 基本 工作 完成 后 对 顶部 区 域 进行 分 析 ， 项 部 区 域 包含 图 片 、 导 航 菜单 和 搜 
索 框 等 内 容 。 实 现 的 主要 代码 如 下 所 示 : 


上 述 代码 首先 使 用 header 元 素 定义 整个 项 部 区 域 的 内 容 ， 接 着 将 menu 元 素 和 开元 素 
相 结 合 实现 首页 页 面 的 导航 列表 信息 ; 然后 创建 用 户 用 于 输入 的 HTML 表单 ， 在 该 表单 中 
添加 用 户 搜索 的 输入 框 ， 指 定 该 输入 框 的 spellcheck 属性 用 于 检查 输入 的 内 容 是 否 合法 ; 
最 后 通过 nav 元 素 实现 搜索 后 面 的 超 链接 信息 。 

(5) 为 顶部 区 域 的 相关 元 素 添加 样式 ， 其 主要 代码 如 下 : 


(6) 使 用 footer 元 素 和 address 元 素 创 建 底部 区 域 , 该 区 域 主要 显示 友情 链接 及 版 权 信 
息 ，address 元 素 用 来 定义 文档 作者 的 联系 方式 。 其 主要 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


词汇 查看 </a> | <a href="#">RSS</a> </div> 

本 文 的 内 容 网 页 版 权 @2006 郑州 汇 智 科技 有 限 公司 <a href="#" title="Valid XHTML 
1.1!">XHTML 1.1</a> | <a href="#" title="Valid CSS!">CSS 2.1</a> <br /> 
<address class="author"> 

设计 者 : Stamatis Kritikos， 更 多 内 容 请 联系 : <a href="#" title="Creative 
Commons Deed">Creative Commons Attribution 2.5 License</a>. </address> 


</footer> 
(7) 为 底部 区 域 的 footer 元 素 和 address 元 素 添加 代码 ， 主 要 样式 如 下 所 示 : 


footer { 
width: auto!important; 
background: #8ccc33 url ("img/overburn2.gif") no-repeat center bottom; 
clear: both; 
position: relative; 
text-align: center; 
font-size: 10px; 
line-height: 0.9em; 
padding: 0; 

} 

footer a:hover { 
color: #1f5791!important; 
font-weight: bold!important; 

] 

address { 
padding: 5px 0; 

} 


(8) 根据 上 面 的 操作 步骤 ， 已 经 完成 了 顶部 区 域 和 底部 区 域 相关 代码 和 样式 的 设计 ， 
运行 上 面 的 代码 进行 测试 查看 效果 ， 其 运行 效果 如 图 2-30 所 示 。 


ET 


图 2-30 ”顶部 区 域 和 底部 区 域 运行 效果 
(9) 中 间 区 域 是 整个 页 面 最 重要 的 部 分 ， 在 本 案例 中 中 间 区 域 包括 左 侧 、 中 间 和 右 侧 
3 部 分 。 左 侧 部 分 主要 显示 快捷 列表 和 旅游 注意 事项 两 部 分 内 容 ， 该 部 分 页 面 的 具体 代码 
如 下 所 示 : 


上 述 代 码 添 加 了 两 个 div 元 素 分 别 显示 快捷 方式 列表 和 旅游 注意 事项 ， 第 一 个 div 元 


素 使 用 和 上 二 元 素 显示 无 序列 表 ， 第 二 个 div 元 素 使 用 ol 和 【元素 显示 有 序列 表 ， 设 置 
ol 元 素 的 start 属性 值 以 1 开始 。 
(10) 为 左 侧 内 容 的 不 同 元 素 添加 样式 ， 其 样式 主要 代码 如 下 所 示 : 


(11) 中 间 区 域 的 中 间 部 分 主要 显示 旅游 的 一 些 文章 内 容 ， 其 主要 代码 如 下 所 示 : 


上 述 代 码 首先 通过 article 元 素 声明 右 侧 整体 内 容 , 然后 在 该 元 素 中 添加 两 个 section 元 
素 ， 这 两 个 元 素 分 别 表 示 两 篇 文章 信息 。 每 个 section 元 素 中 都 使 用 meter 元 素 形容 当前 文 
章 的 评价 ;mark 元 素 高 亮 处 理 关 键 字 符 “ 旅 游 ” time 元 素 显示 当前 文章 的 发 布 时 间 。 另 
外 第 一 个 section 元 素 中 将 ol 和 工 元素 相 结合 实现 有 序列 表 ， 使 用 cite 元 素 标记 文章 内 容 
的 出 处 ; 第 二 个 section 元 素 中 使 用 aside 元 素 显 示 文 章 标题 的 附属 内 容 。 

(12) 为 文章 内 容 的 相关 元 素 添 加 样式 ， 其 主要 样式 代码 如 下 所 示 : 


(13) 中 间 区 域 右 侧 的 代码 非常 简单 ， 主 要 显示 夏 日 旅行 社 的 简单 信息 ， 实 现 该 部 分 
的 代码 非常 简单 。 具 体 代码 如 下 所 示 : 


(14) 为 中 间 区 域 右 侧 部 分 的 内 容 添加 相应 的 代码 ， 具 体 样式 代码 如 下 所 示 : 


(15) 到 了 这 里 ， 中 间 区 域 页 面 代码 和 样式 代码 的 设计 基本 完成 。 本 节 项 目 案例 主要 
通过 HTML 5 中 的 常用 元 素 设计 旅游 首页 页 面 ， 到 目前 为 止 ， 本 案例 构建 旅游 首页 的 内 容 
已 经 结束 ， 其 最 终 效果 如 图 2-28 所 示 。 


2.10 习题 


一 、 填 空 题 

1. 所 有 HTML 5 页面 的 根 元 素 是 。 

2. head 部 分 元 素 可 提供 有 关 页 面 的 元 信息 。 

3. HTML 5 中 新 增加 了 多 个 元 素 共 用 的 全 局 属性 ， 其 中 最 常用 的 属性 包括 hidden、 
draggable、 和 contenteditable。 

4. HTML 5 中 将 的 属性 值 设置 为 tue 表示 指定 的 元 素 是 可 以 拖 动 的 。 

5. HTML 5 中 使 用 元 素 定 义 一 个 正在 完成 的 进度 条 。 

6. command 元 素 的 type 属性 包括 、checkbox 和 radio。 

和 属性 的 值 规定 某 个 元 素 是 否 进行 显示 或 隐藏 。 


二 、 选 择 题 


ls 元 素 不 是 HIML 5 中 新 添加 的 元 素 。 
. header 
meter 
. progress 
D. ul 
2. 下面 选 项 中 ， 说 法 是 正确 的 。 
A. 与 HIML4 相 比 ,，u、ol、dl 和 article 这 4 个 元 素 都 是 新 添加 的 元 素 
B. 文档 头 部 元 素 中 主要 包括 6 个 元 素 ， 如 tile、cite、base 和 link 等 
C. 所 有 HIML 5 页 面 的 根 元 素 为 html 元 素 
D. 所 有 HTML 5 页 面 的 根 元 素 为 head 元 素 
3. HTML 5 中 每 隔 10 秒 刷新 一 次 页 面 ， 实 现 的 代码 为 
A. <meta http-equiv="content-type " content="10" /> 
B. <meta http-equiv="content-type " content="1" /> 
C. <meta http-equiv="refresh" content="1" /> 
D. <meta http-equiv="refresh" content="10" /> 
4. 关于 hgroup 元 素 的 作用 ， 下 面 说 法 ”是 正确 的 。 
A. 用 来 在 文档 中 呈现 联系 信息 
B. 将 标题 及 其 子 标题 进行 分 组 的 元 素 
C. 进行 编码 格式 


o 中 > 
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D. 以 上 三 个 答案 都 正确 
5. 下 面 这 段 代 码 中 ， 横 线 处 填写 的 内 容 


5 之 


最 合适 的 应 该 是 g 


<div class="ftlink float-l"><A href="aboutus.html"> 关 于 我 们 </A> | <A 
href="etrs .html"> 免 责 声明 </A> | <A href="adver.html"> 广 告 合作 </A> | <A 
href="knowledge .html"> 知 识 产权 </A> | <A href="payment .html"> 支 付 方式 </A> 
| <A href="contactus.html"> 联 系 方式 </A> | <A href="zhaopin.html"> 加 入 我 
们 </A><p id="copyright">(c) 2009. All Rights Reserved. </p></div> 


人 
让 所 


> 


footer 
address 


article 


samPp 


section 


6. 
start 和 reversed 
type 和 compact 


eR 


D. start 和 sizes 


reversed 和 compact 


5 HTML 4 之 前 的 版 本 相 比 ， 


是 ol 元 素 中 新 添加 的 属 ' 


7. 如 果 用 户 要 实现 图 2-31 中 的 效果 ， 必 须 使 用 到 HTML 5 中 的 


性 。 


JIWL 5 文档 


C file:///E:VHTNL/1ianxi. htal 


aside 和 1i 元 素 


ol 和 上 二 元 素 
summary 和 1i 元 素 


三 、 上 机 练习 
1. 显示 文章 评论 列表 


Ho 


details 和 summary 元 素 


在 Dreamweaver CS5 中 新 添加 一 个 HIML 页 面 ,在 页 面 的 合适 位 置 添 
元 素 和 section 元 素 )， 页 面 的 最 终 运行 效果 如 图 2-32 所 示 。 


加 元 素 ( 如 article 


“Designing a blog with htm15" 文 章 的 所 有 评论 
| 闫 党 不 和 的 一 入 文章 ， 特 刘 旦 作 这 种 补 和 者 ， 归 着 做 了 
- 者 者 ,加 可 


难 理 一 见 的 精品 。 所 以 胆 不 光 球 他 由 教 了 ， 在 这 里 给 馆 主 
1 给 个 提 ip， 地基 J。 性 齐 看 到 更 多 好 的 教程 ，。，- 


图 2-32 上 机 实践 1 运行 效果 


2. 显示 页 面 详细 信息 


在 Dreamweaver CS5 中 添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 元 素 , 页 面 的 最 
终 运 行 效果 如 图 2-33 所 示 。 读 者 可 以 根据 效果 图 添加 合适 的 元 素 ， 如 header 元 素 、mark 
元 素 、hgroup 元 素 、nav 元 素 和 section 元 素 等 。( 提 示 : 并 非 使 用 本 节 课 所 介绍 的 全 部 元 
素 ， 但 是 以 HITML 5 新 添加 的 元 素 优 先 考 虑 。) 


TPR 
3 © | Daile:/AAE:AEDHLAlianrihtml 


《十 万 个 为 什么 》 图 书 详细 


< 《十 万 个 为 什么 4《18) 儿 重 驻守 (8) 小 说 人 6) 好 书 (5) 交通 (4) 为 和 之) 


《十 万 个 为 上 么 》 刘 面 图 片 


编辑 推荐 
6 党 是 六 了 知 力 字 的 月 本息 ， 是 全 柄 芋 了 请 攻取 待 大 力 开 : 
大" 几 站 友信 妇 1 节 只 党 项 的 您 近 并 了 不 窜 本 过 及 季 选 笃 19 个 小 苗 届 共 42 蜂 的 完 下 和 浴 


es ee 将 羡 幼 雪 专 家 桂 心 下 作 的 辅导 性 皖 
为 守 4e 供 了 训 区 ， 隐 作息 质子 一 和 95 基 过 全 功 儿 成 长 未 国 | 


六 机 二 对 多 ,这 


图 2-33 上 机 实践 2 运行 效果 


2.11 实践 疑难 解答 


2.11.1 command 元 素 无 法 显示 效果 


HTML 5 中 command 元 素 无 法 显示 效果 
网 络 课堂 : http://bbs.itzcn.com/thread-19722-1-1.html 


【 问题 描述 } 各 位 前 辈 好 ， 我 最 近 开 始 学 习 HTML 5 的 相关 知识 。 在 学 习 HIML 5 中 
新 增加 的 command 元 素 时 写 了 一 段 代 码 ， 单 击 该 元 素 触 发 Click 事件 时 没有 任何 反应 。 我 
使 用 了 多 个 浏览 器 (如 谷歌 浏览 器 、 正 浏览 器 和 火狐 浏览 器 ) 进行 测试 ， 但 是 每 个 浏览 器 
都 没有 反应 ， 这 是 怎么 回 事 ? 

【解决 办 法 】 这 位 同学 你 好 ， 这 个 问题 很 简单 ， 就 是 你 目前 所 使 用 的 主流 浏览 器 的 版 
本 都 不 支持 command 元 素 。 你 可 以 使 用 当前 的 浏览 器 访问 网 址 html5test.com 查看 你 当前 
的 浏览 器 对 HTML 5 支持 所 得 的 分 数 ， 分 数 越 高 说 明 对 HTML 5 内 容 的 兼容 性 越 高 。 另 外 
你 也 可 以 查看 该 浏览 器 对 HTML 5 中 内 容 的 支持 情况 。 


2.11.2 ”HTML 5 中 如 何 使 用 新 增加 的 元 素 


加 > HTML 5 中 如 何 使 用 新 增加 的 元 素 
[2 外 ”网络 课堂 : http://bbs.itzen.com/thread-19723-1-1.html 


【问题 描述 】: 各 位 前 辈 好 , 我 最 近 有 一 个 烦恼 , HTML 5 新 增加 了 这 么 多 元 素 , 如 header 
元 素 、footer 元 素 和 menu 元 素 等 ， 但 是 这 些 元 素 究竟 在 什么 时 候 使 用 呢 ? 

【解决 办 法 】 这 位 同学 你 好 ， 我 们 都 知道 HTML 5 的 出 现 使 页 面 更 加 简洁 和 明确 ， 但 
是 并 非 在 页 面 中 使 用 越 多 的 HTML 5 元 素 越 好 。 这 些 元 素 只 要 放置 在 页 面 的 合适 位 置 就 可 
以 。 如 将 页 面 的 框架 分 为 上 、 中 、 下 3 部 分 , 其 中 顶部 可 以 直接 使 用 header 元 素 代替 HTML 
4 之 前 的 版 本 中 id 为 header 的 div 元 素 ; footer 元 素 代替 旧版 本 中 id 为 footer 的 div 元 素 ; 
article 元 素 直 接 代替 中 间 区 域 id 为 right 或 body 等 的 div 元 素 ， 直 接 使 用 cite 元 素 显 示 引 
用 的 文献 样式 ， 不 需要 再 特意 通过 CSS 设计 样式 。 


使 用 HTML S 设计 表单 
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HTML 5 中 的 表单 在 功能 实现 和 页 面 展示 方面 有 不 可 替代 的 作用 ， 与 HTML 4 相 比 ， 
它 添加 了 许多 新 的 功能 ， 如 新 增 了 元 素 类 型 (email、url 和 number 等 )， 为 元 素 新 增 了 属 
性 并 且 在 数据 验证 时 减少 了 JavaScript 代码 的 编写 。 这 些 功 能 的 实现 ， 大 大 提高 了 开发 的 
效率 。 

本 章 将 详细 介绍 HTML 5 表单 的 相关 知识 ， 包 括 新 增 的 输入 类 型 、 属 性 和 元 素 ， 另 外 
还 将 介绍 提交 表单 时 的 验证 处 理 。 

本 章 学 习 要 点 : 

了 解 HTML 中 传统 的 表单 元 素 
熟练 掌握 HTML 5 中 新 增 的 输入 类 型 
熟练 掌握 HTML 5 中 新 增 的 表单 属性 
熟练 掌握 HTML 5 中 新 增 的 表单 元 素 
熟悉 在 提交 表单 时 的 验证 处 理 
实现 购物 网 站 注册 页 面 的 设计 


3.1 “传统 表单 元 素 


v 


v 
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HTML 表单 是 Web 浏览 器 和 Web 服务 器 进行 通信 时 最 常用 的 途径 ， 通 常用 于 提交 个 
人 注册 信息 、 购 物 信息 、 发 表 评 论 、 发 表 留 言 等 ， 还 可 以 用 于 发 布 新 闻 、 公 告 、 调 查 结果 
等 。HTML 为 此 提供 了 表单 元 素来 设计 和 实现 这 些 功能 。 本 节 将 学 习 HTML 中 传统 的 表单 
元 素 。 


3.1.1 表单 标记 


表单 信息 处 理 的 过 程 为 ， 当 单 击 表单 中 的 提交 按钮 时 用 户 输入 的 内 容 会 上 传 到 服务 
器 ， 然 后 由 服务 器 中 的 有 关 应 用 程序 进行 处 理 ， 处 理 后 将 用 户 提交 的 信息 储存 在 服务 器 端 
的 数据 库 中 ， 或 者 将 有 关 的 信息 返回 到 客户 端 浏览 器 中 。 

表单 是 网 页 上 的 一 个 特定 区 域 ， 这 个 区 域 是 由 一 对 <form> 标 记 定 义 的 。 表 单 标 记 
<form> 是 成 对 出 现 标 记 , 首 标记 <form> 和 尾 标记 </form> 之 间 的 内 容 就 是 一 个 表单 。 它 的 作 
用 有 两 方面 ， 第 一 方面 是 限定 表单 的 范围 ， 其 他 的 所 有 基本 表单 控件 都 包含 在 这 对 表单 标 
记 之 内 ， 作 为 该 表单 常规 内 容 的 一 部 分 ， 例 如 文本 输入 框 、 复 选 框 、 按 钮 等 。 单 击 提交 按 


钮 时 ， 提 交 的 也 是 表单 范围 之 内 的 内 容 。 第 二 方面 是 携带 表单 的 相关 信息 ， 例 如 处 理 表单 
的 脚本 程序 的 位 置 、 提 交 表 单 的 方法 等 ， 这 些 信 息 对 于 浏览 者 是 不 可 见 的 ， 但 对 于 处 理 表 
单 却 有 着 决定 性 的 作用 。 

表单 form 的 基本 语法 如 下 所 示 : 


由 于 标记 <form> 和 </form> 本 身 只 是 用 来 声明 表单 的 开始 和 结束 , 而 表单 内 容 的 呈现 是 
通过 基本 表单 控件 来 实现 的 ， 因 此 在 标记 <form> 与 </form> 之 间 还 必须 包含 相应 的 表单 控 
件 。 表单 中 的 所 有 控件 的 名 称 / 值 对 构成 了 表单 数据 集 ， 当 表单 被 提交 时 浏览 器 负责 将 表单 
数据 集 传送 给 远程 Web 服务 器 ， 由 服务 器 来 进行 相关 处 理 。 

<form> 标 记 有 两 个 重要 的 属性 : action 属性 和 method 属性 。 


I 


action 属性 是 <form> 标 记 不 可 缺少 的 一 个 属性 ， 它 用 来 指定 当 表单 提交 时 要 采取 的 动 
作 。 其 属性 值 一 般 是 要 对 表单 数据 进行 处 理 的 相关 程序 地 址 ， 也 可 以 是 收集 表单 数据 的 
E-mail 地 址 , 该 URL 所 指向 的 服务 器 并 不 一 定 要 与 包含 表单 的 网 页 是 同一 服务 器 , 它 可 以 
是 位 于 任何 地 方 的 服务 器 ， 只 要 给 出 绝对 URL 地 址 即 可 。 例 如 : 


method 属性 用 于 指定 该 表单 的 运行 方式 。 属 性 的 参数 值 为 get 或 者 post。 虽 然 这 两 种 
方法 都 是 数据 的 提交 方式 ， 但 是 在 实际 传输 时 却 有 很 大 的 区 别 。 


【实践 案例 3-1】 
用 本 节 所 学 的 表单 标记 及 其 相关 属性 设计 login.html 页 面 ， 要 求 用 户 在 表单 的 文本 杠 
中 输入 用 户 名 和 密码 ， 然 后 实现 登录 的 功能 。 具 体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


<tr><td height="53"><table width="100%" border="0" cellspacing="0" 
cellpadding="0"> 
<tr><td width="394" height="53" background= 
"images/login 05.gif">gnbsp;</td> 
<td width="206" background="images/login 06.gif"><table 
width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tr><td width="16%" height="25"><div align="right"><span 
class="STYLE1"> 用 户 </span></div></td> 
<td width="57%" height="25"><div align="center"> 
<input type="text" name="textfield" style="width:105px; 
height:17px; background-color:#292929; border:solid lpx 
#7dbad7; font-size:12px; color:#6cd0ff"></div></td> 
<td width="27%" height="25">gnbsp;</td></tr> 
<tr><td height="25"><div align="right"><span class="STYLE1"> 
密码 </span></div></td> 
<td height="25"><div align="center"> 
<input type="password" name="textfield2" style="width:105px; 
height:17px; background-color:#292929; border:solid lpx 
#7dbad7; font-size:12px; color:#6cd0ff"> 
</div></td> 
<td height="25"><div align="left"><a href="main.html"><img 
src="images/dl .gif" width="49" height="18" border="0"></a> 
</div></td></tr></table></td> 
<td width="362" background="images/login 07.gif">gnbsp; 
</td></tr></table></td></tr> 
<tr><td height="213" background="images/login 08.gif"></td></tr> 
</table></td></tr> 
</table> 
</form> 


运行 上 述 代 码 ， 最 终 效果 如 图 3-1 所 示 。 
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图 3-1 登录 表单 


3.1.2 ”基本 表单 元 素 


HTML 表单 中 主要 包括 input、select、textarea、button、lable、fieldset 以 及 legend 等 
表单 元 素 ， 下 面 对 这 些 元 素 进行 简单 地 介绍 。 


input 元 素 可 以 用 来 定义 单行 输入 文本 框 、 输 入 密码 框 、 单 选 按钮 、 复 选 框 、 隐 藏 控件 
和 重 置 按钮 等 .input 元 素 是 表单 中 最 丰富 的 一 个 功能 , 它 必须 柑 套 在 表单 标记 中 使 用 ,input 
元 素 有 两 个 固定 属性 : name 和 type。 
下 面 主 要 介绍 input 元 素 的 type 属性 ，type 属性 的 值 有 以 下 几 种 。 
text 定义 单行 的 输入 字段 ， 用 户 可 在 其 中 输入 文本 ， 默 认 宽 度 为 20 个 字符 。 
password 定义 密码 字段 ， 该 字段 中 的 字符 被 掩 码 。 
checkbox 定义 复 选 框 。 
button 定义 可 单 击 按钮 (多数 情况 下 ， 用 于 通过 JavaScript 启动 脚本 )。 
radio 定义 单 选 按钮 。 
reset 定义 重 置 按钮 ， 重 置 按钮 会 清除 表单 中 的 所 有 数据 。 
submit 定义 提交 按钮 ， 提 交 按 钮 会 把 表单 数据 发 送 到 服务 器 。 
hidden 定义 隐藏 的 输入 字段 。 
file 定义 输入 字段 ， 供 文件 上 传 。 
image 定义 图 像 形式 的 提交 按钮 。 


select 元 素 用 于 创建 下 拉 菜 单 和 列表 框 , 它 至 少 包含 一 个 option 元 素 。 一 般 它 将 包含 两 
个 或 者 两 个 以 上 的 option 元 素 ， 因 为 下 拉 菜 单 和 列表 框 的 每 个 选项 都 需要 一 个 option 元 素 
来 呈现 。 


textarea 控件 用 来 创建 多 行文 本 框 〈 文 本 区 域 )， 它 不 像 单行 输入 文本 框 ， 再 多 的 文本 
数据 也 只 能 在 同一 行 中 输入 ， 而 是 用 于 接收 访问 者 输入 多 于 一 行 的 文本 ， 即 它 可 以 同时 呈 
现 多 行 数据 。 它 的 使 用 格式 如 下 所 示 : 


button 控件 用 来 创建 图 像 按钮 ， 也 就 是 允许 Web 开发 人 员 选 用 自己 喜欢 的 图 像 来 作为 
按钮 ， 而 不 是 使 用 浏览 器 所 产生 的 按钮 ， 这 样 就 可 以 将 按钮 与 表单 结合 起 来 达到 美化 界面 
的 效果 。 使 用 button 创建 图 像 按钮 的 具体 格式 如 下 所 示 : 


OOOOOOOOODO 


和 和. 


label 元 素 可 用 来 把 信息 附属 于 其 他 元 素 ， 每 个 label 元 素 精 确 地 与 一 个 表单 元 素 相 关 
联 ， 而 一 个 元 素 可 与 多 个 元 素 关联 。 属 性 for 是 该 元 素 中 很 重要 的 一 个 属性 ， 它 用 于 把 一 
个 label 绑 定 在 另 一 个 元 素 上 , 设置 属性 for 的 值 等 于 相关 联 元 素 的 id 属性 值 。 它 的 格式 如 
下 所 示 : 


3.2 ”新 增 输入 类 型 


HTML 5 相 比 HTML 4 有 了 很 大 的 进步 ， 它 对 form 元 素 进行 了 大 量 修 改 , 添加 了 许多 
新 的 输入 类 型 ， 比 如 search 类 型 、email 类 型 和 url 类 型 等 。 使 用 这 些 新 增 类 型 可 以 完成 
HTML 4 需要 相应 代码 才能 完成 的 工作 ， 提 供 了 更 好 的 输入 控制 和 验证 。 本 节 将 详细 介绍 
HTML 5 表单 新 增 的 输入 类 型 。 


3.2.1 email 类 型 


email 类 型 是 用 来 输入 邮件 地 址 的 文本 框 。 该 文本 框 与 其 他 文本 框 在 页 面 显 示 时 没有 区 
别 ， 专 门 用 于 接收 E-mail 地 址 信息 。 因 此 当 提 交 表 单 时 将 会 自动 验证 文本 框 中 的 内 容 是 否 
符合 E-mail 邮件 地 址 格式 ;如果 不 符合 ， 将 提示 相应 的 错误 信息 。 

如 果 将 邮箱 地 址 输入 框 的 multiple 属性 设置 为 tue， 则 允许 用 户 输入 一 串 喜 号 分 隔 的 
邮箱 地 址 。 

下 面 通过 简单 的 案例 来 介绍 一 下 email 类 型 input 元 素 的 使 用 。 

【实践 案例 3-2】 

创建 emailform html 页 面 ， 在 form 表单 中 添加 4 个 输入 框 ， 分 别 用 于 输入 用 户 名 、 登 
录 密 码 、 密 码 确认 和 电子 邮箱 ， 实 现 注册 页 面 的 操作 。 具 体 代码 如 下 所 示 : 


提交 表单 前 并 不 会 验证 email 类 型 的 文本 框 的 内 容 是 否 为 空 ， 而 是 在 不 为 空 的 
情况 下 验证 其 内 容 是 否 符合 标准 的 E-mail 格式 。 


如 果 邮 箱 地 址 不 符合 正确 的 格式 ， 上 述 代码 在 不 同 的 浏览 器 中 所 显示 的 提示 信息 不 
同 ， 图 3-2 和 图 3-3 分 别 为 Chrome 浏览 器 和 Opera 浏览 器 中 的 运行 效果 。 
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3-2 Chrome 浏览 器 效果 图 3-3 ”Opera 浏览 器 效果 图 


3.2.2 search 类 型 


search 类 型 是 用 来 输入 搜索 关键 字 的 文本 框 。 该 类 型 与 text 类 型 仅仅 在 外 观 上 有 区 别 ， 
它 的 输入 框 为 圆 角 和 矩形 文本 框 ， 但 是 也 可 以 用 CSS 样式 表 进 行 修改 。 当 用 户 开 始 输入 时 ， 
它 的 右边 会 有 一 个 “x” 按 钮 ， 单 击 这 个 按钮 可 以 快速 清除 文本 框 中 的 内 容 。 

下 面 通过 简单 的 案例 来 介绍 一 下 search 类 型 input 元 素 的 使 用 。 

【实践 案例 3-3】 

创建 searchform.html 页 面 ,在 form 表单 中 添加 search 类 型 的 文本 框 和 value 值 为 “ 提 
交 ” 的 按钮 ， 该 按钮 实现 搜索 关键 字 的 操作 。 具 体 代码 如 下 所 示 : 


上 述 代码 中 【提交 ]】 按钮 有 一 个 onclick 事件 ， 单 击 【提交 ]】 按钮 时 则 会 触发 该 事件 并 
找到 searchResult0 函 数 ，JavaScript 中 searchResult0 函 数 的 代码 如 下 所 示 : 


上 述 代 码 在 Chrome 浏览 器 中 的 运行 效果 如 图 3-4、 图 3-5 和 图 3-6 所 示 。 


图 3-4 输入 关键 字 的 效果 3-5 单 击 x 的 效果 图 3-6 单 击 【 提 交 】 按 钮 


3.2.3 url 类 型 


url 类 型 是 用 来 输入 URL 地 址 的 文本 框 。 在 浏览 器 兼容 情况 下 type=“url” 类 型 的 文本 
框 能 够 正确 提交 符合 URL 地 址 格式 的 内 容 。 因 此 当 提交 表单 时 将 会 自动 验证 url 文本 框 中 
的 值 。 如 果 url 地 址 不 合法 则 浏览 器 不 允许 提交 ， 并 且 提 示 错 误 信息 。 

下 面 通过 简单 的 案例 来 介绍 一 下 url 类 型 input 元 素 的 使 用 。 

【实践 案例 3-4】 

创建 一 个 urlform html 页 面 ， 在 form 表单 中 添加 4 个 文本 框 ， 用 于 输入 用 户 姓名 、 登 
录 密 码 、 密 码 确认 和 博客 地 址 ， 并 添加 value 值 为 “提交 ”的 按钮 实现 表单 提交 url 地 址 的 
操作 。 具 体 代码 如 下 所 示 : 


上 述 代码 在 不 同 的 浏览 器 中 所 显示 的 效果 不 同 , 图 3-7 和 图 3-8 分 别 是 在 Chrome 浏览 


器 和 Opera 浏览 器 中 的 运行 效果 。 
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3-7 Chrome 浏览 器 效果 图 


3.2.4 number 类 型 


number 类 型 是 用 来 输入 数字 的 文本 框 ， 
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并 且 在 提交 时 会 检测 其 中 的 内 容 是 否 为 数字 。 


在 HIML 4 之 前 的 版 本 中 如 果 想 要 得 到 一 个 指定 范围 的 整数 ， 就 得 使 用 JavaScript 或 者 
JQuery 等 方法 。 而 HTML 5 中 增加 了 新 的 数字 类 型 可 以 很 方便 地 实现 上 述 操作 。 

在 number 类 型 的 文本 框 中 用 户 不 可 以 输入 其 他 非 数 字 型 的 字符 ， 并 且 当 输入 的 数字 
大 于 设 定 的 最 大 值 或 者 最 小 值 时 都 将 出 现 数字 输入 错误 的 提示 信息 。 但 是 该 类 型 不 进行 输 
入 内 容 是 否 为 空 值 的 自动 检测 。number 类 型 的 属性 如 下 所 示 。 

口 min 指定 输入 框 可 以 接受 的 最 小 输入 值 。 

口 max 指定 输入 框 可 以 接受 的 最 大 输入 值 。 

口 step 输入 域 合法 的 间隔 ， 如 果 不 设置 ， 则 默认 值 是 1 。 

口 value 规定 默认 值 。 

下 面 通过 简单 的 案例 来 介绍 一 下 number 类 型 input 元 素 的 使 用 。 

【实践 案例 3-5】 

创建 页 面 numberform.html, 在 form 表单 中 添加 3 个 输入 框 ,分别 用 于 输入 用 户 姓 名 、 
登录 密码 和 出 生日 期 并且 添加 value 为 “提交 ”的 按钮 实现 数字 匹配 的 操作 。 具 体 代码 
如 下 所 示 : 


上 述 代码 在 type 为 number 类 型 的 出 生日 期 输入 框 中 使 用 min 属性 设置 文本 框 输入 的 


最 小 值 ， 使 用 max 属性 设置 文本 框 输入 的 最 大 值 ，step 指定 间隔 。 所 有 这 些 属 性 值 都 是 可 
选 的 ， 如果 不 需要 指定 就 可 以 省 略 。 用 户 在 使 用 时 可 以 单 击 number 类 型 输入 框 右 侧 的 微调 
控件 ， 向 上 增加 值 或 者 向 下 减少 值 。 


在 上 述 代码 中 设置 了 step 属性 的 值 为 6， 则 只 有 值 1、7、13、19、25、 四 


上 述 代码 在 不 同 的 浏览 器 中 所 显示 的 效果 不 同 ， 图 3-9 和 图 3-10 分 别 是 在 Chrome 浏 
览 器 和 Opera 浏览 器 中 的 运行 效果 。 
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图 3-9 Chrome 浏览 器 效果 图 3-10 ”Opera 浏览 器 效果 图 


3.2.5 telephone number 类 型 


telephone number 类 型 是 用 来 验证 电话 号 码 之 类 的 文本 框 。 在 HIML 4 之 前 的 版 本 中 如 
果 想 要 验证 固定 电话 号 码 、 手 机 号 码 是 否 合法 ， 需 要 使 用 JavaScript、JQuery、 正 则 表达 式 
等 方法 。HTML 5 增加 了 新 的 telephone number 类 型 ， 可 以 很 方便 地 实现 上 述 操作 。 


下 面 通过 简单 的 案例 来 介绍 telephone number 类 型 input 元 素 的 使 用 。 

【实践 案例 3-6】 

创建 ttlnumberform html 页 面 ， 在 form 表单 中 添加 多 个 输入 框 用 于 输入 用 户 姓名 、 登 
录 密 码 、 年 龄 和 固定 电话 ， 用 来 实现 验证 输入 的 固定 电话 号 码 是 否 合法 。 上 有 具体 代码 如 下 
所 示 : 


在 type 为 telephone 的 固定 电话 号 码 输 入 框 中 使 用 pattem 属性 验证 电话 号 码 的 格式 是 
否 正 确 “AAd{3}-\df8} df4}-dt7}$” 表 示 输 入 的 电话 号 码 必须 符合 格式 010-12356847 或 者 
0651-2365147。 如 果 输 入 电话 号 码 不 符合 以 上 格式 ， 则 会 出 现 错误 提示 。 


在 该 类 型 中 type 的 值 既 可 以 为 tel 也 可 以 为 telephone， 还 可 以 为 telephone 
number， 三 者 的 用 法 是 一 样 的 。 


上 述 代码 在 不 同 的 浏览 器 中 所 显示 的 效果 不 同 , 图 3-11 和 图 3-12 分 别 是 在 Chrome 浏 
览 器 和 Opera 浏览 器 中 的 运行 效果 。 
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图 3-11 Chrome 浏览 器 效果 图 3-12 ”Opera 浏览 器 效果 图 


3.2.6 range 类 型 


range 类 型 是 用 来 得 到 一 定 范围 内 数字 值 的 文本 框 。 在 HTML 4 之 前 的 版 本 中 如 果 想 
要 得 到 指定 范围 内 的 数字 ， 可 以 使 用 JavaScript 或 者 JQuery 等 验证 。 也 可 以 使 用 前 面 学 习 
的 number 类 型 ， 但 是 ， 本 小 节 将 介绍 HTML 5 中 另 一 种 数字 输入 类 型 range， 它 和 number 
类 型 稍 有 不 同 ，number 类 型 在 页 面 输入 框 中 加 微调 控件 显示 ， 而 range 类 型 则 以 滑动 条 的 
形式 展示 数字 ， 通 过 拖 动 滑 块 实现 数字 的 改变 。range 类 型 的 属性 如 下 所 示 。 

口 min 指定 输入 框 可 以 接受 的 最 小 输入 值 。 

口 max 指定 输入 框 可 以 接受 的 最 大 输入 值 。 

口 step 输入 域 合法 的 间隔 ， 如 果 不 设置 ， 则 默认 值 是 1。 

口 value 规定 默认 值 。 

下 面 通过 简单 的 案例 来 介绍 range 类 型 input 元 素 的 使 用 。 

【实践 案例 3-7】 

创建 rangeform.html 页 面 ， 在 form 表单 中 添加 3 个 range 类 型 的 输入 框 和 span 元 素 ， 
3 个 range 类 型 的 输入 框 分 别 用 于 设置 颜色 中 的 红色 (red)、 蓝 色 (blue) 和 绿色 〈green)， 
当 拖 动 滑动 条 时 改变 背景 颜色 ， 实 现 不 同 范围 内 颜色 的 动态 改变 。 有 具体 代码 如 下 所 示 : 


上 述 代码 在 type 为 range 类 型 的 选择 颜色 值 的 文本 框 中 使 用 min 属性 设置 拖 动 条 允许 
拖 动 的 最 小 值 ， 使 用 max 属性 设置 允许 拖 动 的 最 大 值 ， 使 用 step 属性 指定 间隔 。 这 3 个 文 
本 框 调用 onchange 事件 中 的 changeColor0 方 法 ，JavaScript 中 的 具体 代码 如 下 所 示 : 


上 述 代码 在 不 同 的 浏览 器 中 所 显示 的 效果 不 同 , 图 3-13 和 图 3-14 分 别 是 在 Chrome 浏 
览 器 和 Opera 浏览 器 中 的 运行 效果 。 


图 3-13 Chrome 浏览 器 效果 图 3-14 Opera 浏览 器 效果 图 


3.2.7 ”color 类 型 


color 类 型 用 来 选取 颜色 ， 它 提供 了 一 个 颜色 选取 器 。 一 般 情 况 下 选取 所 需要 的 颜色 是 
通过 颜色 选取 器 ， 但 是 本 小 节 将 会 介绍 HIML 5 中 表单 中 新 增 的 color 类 型 ，color 类 型 可 
以 让 用 户 通过 颜色 选择 器 选取 颜色 值 。 

下 面 通过 简单 的 案例 来 介绍 color 类 型 input 元 素 的 使 用 。 

【实践 案例 3-8】 

创建 一 个 colorform.html 页 面 , 在 form 表单 中 添加 color 类 型 的 输入 框 , 通过 选择 颜色 
更 改 页 面 的 背景 颜色 。 具 体 代 码 如 下 所 示 : 


上 述 代 码 在 type 为 color 类 型 的 选择 颜色 的 文本 框 中 触发 onclick 事件 ， 调 用 该 事件 的 
change() 方 法 ，JavaScript 中 change0 方 法 的 代码 如 下 所 示 : 


有 些 浏览 器 不 支持 color 类 型 ， 上 述 代 码 在 Opera 浏览 器 中 的 运行 效果 如 图 3-15、 图 


第 也 


使 用 HTML 5 设计 表单 


3-16 和 图 3-17 所 示 。 


图 3-15 选择 颜色 时 的 效果 图 图 3-16 其 他 颜色 选取 器 ”图 3-17 单 击 【 更 改 背 景 颜 色 】 按钮 


3.2.8 时 间 日 期 类 型 


时 间 日 期 类 型 是 用 于 显示 时 间 和 日 期 的 文本 框 。 在 HIML 4 之 前 的 版 本 中 如 果 要 实现 
这 样 的 输入 框 需要 编写 大 量 的 JavaScript 代码 ， 实 现 过 程 较为 复杂 。 而 在 HTML 5 中 只 需 
使 用 date 类 型 便 能 创建 一 个 日 期 型 的 文本 输入 框 。 当 用 户 单 击 该 文本 框 时 会 弹出 一 个 日 期 
选择 器 ， 之 后 关闭 该 日 期 选择 器 便 会 将 所 选择 的 日 期 显示 在 文本 框 中 。 

HTML 5 拥有 多 种 可 供 选 择 日 期 和 时 间 的 新 输入 类 型 ， 如 下 所 示 。 
date 选取 日 、 月 、 年 。 
month 选取 月 和 年 。 
WwWeek 选取 周 和 年 。 
time 选取 时 间 (小 时 和 分 钟 )。 
datetime 选取 时 间 、 日 、 月 、 年 (UTC 时间 )。 
datetime-local 选取 时 间 、 日 、 月 、 年 (本 地 时 间 )。 


篇、 所 有 这 些 时 间 日 期 类 型 的 输入 框 在 表单 提交 时 ， 都 将 对 输入 的 日 期 或 者 时 
间 进 行 有 效 性 的 检测 ， 如 果 不 符合 规范 将 弹出 错误 的 提示 信息 。 


OOOODO DO 


下 面 通过 简单 的 案例 来 介绍 这 几 种 日 期 类 型 的 input 元 素 的 使 用 。 
【实践 案例 3-9】 


创建 dateform.html 页 面 ， 在 form 表单 中 添加 不 同类 型 的 输入 框 ， 实 现时 间 日 期 类 型 
的 选择 。 具 体 代码 如 下 所 示 : 


<form id="forml"> 
<fieldset> 
<legend> 日 期 和 时 间 : </legend> 
<input name="datel" type="date" /> 
<input name="date2" type="time" /> 
</fieldset> 
<fieldset> 
<legend > 月 份 和 星期 : </legend> 


<input name="date3" type="month" /> 
nm 


<input name="date4" type="week" /> 
</fieldset> 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


<fieldset> 
<legend >UTC 日 期 时 间 和 本 地 日 期 时 间 : </legend> 
<input name="date5" type="datetime" /> 
<input name= datetime-local" /> 
</fieldset> 
</form> 


有 些 浏览 器 不 支持 日 期 时 间 类 型 ， 上 述 代码 在 Opera 浏览 器 中 的 运行 效果 如 图 3-18、 
图 3-19、 图 3-20 和 图 3-21 所 示 。 
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图 3-20 ”week 类 型 图 3-21 datetime 类 型 和 datetime-local 类 型 


图 3-20 中 week 类 型 的 输入 框 中 值 是 “2012-W42” 表 示 2012 年 的 第 42 个 | 
星期 。 


3.3 新 增 表单 属性 


表单 属性 在 HTML 中 是 非常 


要 的 , 它 有 助 于 完善 信息 的 完整 性 和 安全 性 .在 HIML4 


中 表单 属性 是 非常 有 限 的 ， 而 HTML 5 相 比 HIML 4 不 仅 增加 了 许多 新 的 输入 类 型 ， 同 时 
也 增加 了 许多 新 的 表单 属性 。 上 一 节 学 习 了 新 增 的 输入 类 型 , 本 节 将 学 习 新 增 的 表单 属性 。 


3.3.1 autocomplete 属性 


autocomplete 属性 规定 form 或 input 域 是 否 应 该 启用 自动 完成 功能 。 该 属性 有 两 个 值 : 
on 和 off， 默 认 值 为 on。 当 该 属性 值 为 on 时 规定 启用 自动 完成 功能 ， 即 用 户 开始 输入 字段 
时 浏览 器 基于 之 前 输入 过 的 值 显示 在 字段 填写 的 选项 中 ， 当 属性 值 为 off 时 规定 禁用 自动 
完成 功能 。 


下 面 通 过 简单 的 案例 来 介绍 一 下 autocomplete 属性 的 用 法 。 

【实践 案例 3-10】 

创建 autocompleteform.html 页 面 ， 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 用 户 姓名 、 
登录 密码 、 年 龄 和 固定 电话 ， 实 现 自 动 完成 的 操作 。 具 体 代 码 如 下 所 示 : 


上 述 代码 在 用 户 姓名 的 文本 框 中 设置 autocomplete 属性 的 值 为 on， 则 输入 用 户 姓名 时 
就 会 启用 自动 完成 功能 ， 显 示 在 字段 中 应 填写 的 选项 ;而 在 登录 密码 的 文本 框 中 设置 
autocomplete 属性 的 值 为 off， 则 输入 密码 时 就 不 会 启用 该 功能 ， 不 能 显示 在 字段 中 应 填写 
的 选项 。 在 Chrome 浏览 器 中 eis 3-22 和 3-23 所 示 。 
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图 3-22 autocomplete 属性 值 为 on 的 效果 图 图 3-23 autocomplete 属性 值 为 of 的 效果 图 


3.3.2 autofocus 属性 


autofocus 属性 规定 当 页 面 加 载 时 input 元 素 应 该 自动 获得 焦点 。 该 属性 的 值 为 布尔 类 
型 ， 如 果 将 该 属性 的 值 设置 为 true 或 者 直接 输入 autofocus 属性 的 名 称 ， 则 input 元 素 会 自 
动 获得 焦点 。 一 个 页 面具 有 一 个 表单 元 素 具 有 autofocus 属性 。 

下 面 通过 简单 的 案例 来 介绍 autofocus 属性 的 用 法 。 

【实践 案例 3-11】 

创建 autofocusform.html 页 面 ， 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 用 户 姓 名 、 登 
录 密 码 、 年 龄 和 国定 电话 ， 实 现 自动 获得 焦点 的 操作 。 具 体 代 码 如 下 所 示 : 


上 述 代码 在 用 户 名 的 文本 框 中 设置 autofocus 属性 的 值 为 me, 这 样 页 面 加 载 完成 或 者 
单 击 【注册 】 按 钮 后 ， 用 户 名 的 文本 框 就 会 自动 获取 焦点 。 在 Chrome 浏览 器 中 的 运行 效 


果 如 图 3-24 所 示 。 
Le 本 村 we 

站 wotofocus 属 性 的 使 用 
会 3 G 0 file:///D:/zljvork/autofocusforn.htal 


ZE 您 好 请 注册 或 登录 | 帮助 中 心 | 设 为 首页 | 加 入 收 着 
,pn 


| 我 要 学 编程 
免费 注册 窗 内 网 只 境外 项 就 可 立即 注册 窗 内 必 十 ) pa 


二 | 我 想 交 用 友 
tt 


你 知道 这 些 数 蜂 吗 ?了 


窗 内 网 目前 汇集 :97211 个 人 才 共 
有 :5600 个 视频 


关于 我 们 | 免责 声明 | 厂 告 合作 | 知识 产权 | 支付 方式 | 联系 方式 | 加 入 我 们 


Copyrights Reserved 2005-2010 窗 内 网 wx.itzen com 蚤 ICR09104500 入 号 


3-24 ”用 户 名 文本 框 中 autofocus 属性 为 tue 时 的 效果 图 


在 一 个 页 面 中 建议 只 设置 第 一 个 文本 框 的 autofocus 属性 值 为 tue， 如 图 3-24 
所 示 ， 只 设置 用 户 姓名 的 autofocus 属性 。 


3.3.3 disabled 属性 


disabled 属性 使 浏览 器 中 的 内 容 变 为 灰色 ， 如 果 使 用 该 属性 ， 则 会 禁用 输入 字段 。 可 
以 对 disabled 属性 进行 设置 ， 使 用 户 在 满足 某 些 条 件 时 (比如 选中 复 选 框 等 ) 才 能 使 用 输 
入 字段 。 然 后 ， 可 使 用 JavaScript 来 删除 disabled 属性 ， 使 该 输入 字段 变 为 可 用 的 状态 。 

另外 ， 使 用 disabled 属性 的 元 素 是 不 能 和 表单 一 起 提交 的 ， 所 以 它们 的 值 对 服务 器 端 
的 表单 处 理 是 不 可 用 的 。 如 果 想 要 该 值 不 能 被 编辑 ， 同 时 又 可 以 提交 给 服务 器 ， 可 以 使 用 
readonly 属性 。 


下 面 通过 简单 的 案例 来 介绍 disabled 属性 的 用 法 。 

【实践 案例 3-12】 

创建 disabledform.html 页 面 , 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 书 名 、 购 买 数量 
和 显示 价格 ， 并 添加 value 值 为 “提交 ”的 按钮 来 实现 禁用 输入 字段 的 操作 。 具 体 代码 如 
下 所 示 : 


上 述 代 码 在 价格 的 文本 框 中 使 用 disabled 属性 ， 这 样 该 文本 框 区 域 变 为 灰色 ， 不 能 青 
被 编辑 。 在 Chrome 浏览 器 中 的 运行 效果 如 图 3-25 所 示 。 


3.3.4 form 属性 


在 HTML4 以 前 的 版 本 中 要 提交 一 个 表单 ， 会 忽略 不 是 其 子 元 素 的 控件 ， 所 以 需要 把 
相关 的 元 素 都 放 在 form 表单 下 。 但 是 由 于 页 面 设 计 和 实现 的 特殊 性 , 会 存在 一 些 表单 之 外 
的 元 素 也 需要 被 提交 的 情况 。HTML 5 就 解决 了 相关 的 问题 ,为 表单 外 的 元 素 指定 form 属 


性 后 单 击 按钮 ， 不 仅 会 提交 表单 内 元 素 的 值 ， 也 会 提交 该 元 素 的 值 。 


图 3-25 价格 文本 框 中 设置 disabled 属性 的 效果 图 


下 面 通 过 简单 的 案例 来 介绍 form 属性 的 用 法 。 

【实践 案例 3-13】 

创建 formsform.html 页 面 , 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 货号 、 购 买 数量 和 
显示 价格 ， 并 添加 value 值 为 “提交 ”的 按钮 ， 来 实现 提交 内 外 所 有 值 的 操作 。 有 具体 代码 
如 下 所 示 : 


上 述 代码 中 由 于 备注 输入 框 使 用 到 了 form 属性 , 所 以 不 仅 货号 、 数量 和 价格 可 以 随 表 
单 提交 ， 备 注 也 可 以 随 表 单 提交 。 当 单 击 【提交 】 按 钮 后 在 后 台 可 以 取出 这 些 值 ， 后 台 代 


码 如 下 所 示 : 


中 forn 属 性 的 使 用 方法 


$3 C Ofile:///G:/zljvork/veb/fornsforn.htal 
一 淘宝 商城 购物 单 : 


货号 ， |45633221-x1 


JavaScript 提醒 


货号 : 45633221-XI 数 量 : 1 价格 ; 120 备 注 : 请 这 择 中 通 块 弟 有 
CD 
请 寺村 申 通 快 通 > 


图 3-26 备注 文本 域 中 设置 form 属性 的 效果 图 


备注 ， 


3.3.5 list 属 性 


在 HTML 5 中 为 单行 文本 框 增加 了 list 属性 , 该 属性 的 值 为 某 个 datalist 元 素 的 id。 list 
属性 引用 数据 列表 , 其 中 包含 输入 字段 的 预定 义 选项 ,list 属性 规定 输入 域 的 datalist, datalist 
是 输入 域 的 选项 列表 。 


Ee 
] 


下 面 通过 简单 的 案例 来 介绍 list 属性 的 用 法 。 

【实践 案例 3-14】 

创建 listform.html 页 面 ， 在 form 表单 中 新 建 3 个 文本 框 分 别 用 于 显示 书 名 、 购 买 数量 
和 价格 ， 并 实现 显示 输入 字段 预定 义 选项 的 操作 。 具 体 代码 如 下 所 示 : 


有 些 浏览 器 不 支持 list 属性 ， 在 Opera 浏览 器 中 的 运行 效果 如 图 3-27 所 示 。 


3.3.6 multiple 属性 


multiple 属性 规定 输入 域 中 可 选择 多 个 值 。 如 果 元 素 使 用 了 multiple 属性 , 则 该 元 素 可 
以 输入 多 个 值 。 

下 面 通 过 简单 的 案例 来 介绍 multiple 属性 的 用 法 。 

【实践 案例 3-15】 

创建 multipleform html 页 面 ， 在 form 表单 中 新 建 选择 图 片 的 文本 框 ， 并 添加 value 值 
为 “确定 ”的 按钮 。 具 体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 
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图 3-27 书 名 文本 框 中 使 用 list 属性 的 效果 图 


<form id="forml" name="forml" method="post" action="#"> 
<fieldset> 
<legend> 上 和 传 图 片 : </legend> 
选择 图 片 : 
<input type="file" name="images" multiple="multiple" /> 
<input type="submit" value=" 确 定 " /> 
</fieldset> 
</form> 


运行 上 述 代 码 进行 测试 ， 单 击 【 添 加 文件 】 按 钮 时 弹出 图 3-29 所 示 的 对 话 框 ， 在 弹出 
的 对 话 框 中 选择 要 上 传 的 文件 后 单 击 【 打 开 】 按 钮 , 最 终 运 行 效果 如 图 3-28 所 示 。 在 Opera 
浏览 器 中 的 运行 效果 如 图 3-28 和 图 3-29 所 示 。 
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图 3-29 选择 多 个 文件 时 效果 图 


3.3.7 min、max 和 step 属性 


min、max 属性 可 以 将 range 输入 框 的 数值 输入 范围 限定 在 最 低 值 和 最 高 值 之 间 。 这 两 


个 属性 都 是 可 选 的 ， 输 入 型 的 控件 可 以 根据 设置 的 参数 对 值 的 范围 做 出 相应 的 调整 。 
step 属性 可 以 限定 输入 值 增 减 的 梯度 ， 该 属性 的 默认 值 取决 于 控件 的 类 型 。 
min、max、step 属性 的 使 用 方法 如 下 代码 所 示 : 


上 述 代码 会 创建 一 个 范围 从 1950 年 到 2050 年 显示 年 份 的 文本 框 ， 中 间 年 份 增 减 的 梯 
度 为 10 年 。 


3.3.8 placeholder 属性 


在 HIML 5 的 表单 元 素 中 使 用 placeholder 属性 就 可 以 在 输入 框 中 显示 提示 信息 , 用 于 
提示 用 户 应 该 在 此 输入 什么 数据 。 当 输入 框 中 字段 为 空 时 ， 提 示 信 息 就 会 出 现 ; 当 开始 输 
入 字段 时 ， 提 示 信 息 则 会 消失 。 


Placeholder 属性 适用 于 以 下 <input> 类 型 : text、search、url、telephone、email 


和 password。 


下 面 通过 简单 的 案例 来 介绍 placeholder 属性 的 用 法 。 

【实践 案例 3-16】 

创建 placeholderform html 页 面 ， 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 用 户 姓名 、 
身份 证 号 和 出 生日 期 ， 实 现在 输入 框 中 显示 提示 信息 的 操作 。 有 具体 代码 如 下 所 示 : 


上 述 代码 在 用 户 姓 名 的 文本 框 中 使 用 了 placeholder 属性 ， 所 以 这 个 文本 框 中 就 有 对 应 
的 提示 信息 ， 而 在 身份 证 号 的 文本 框 中 没有 使 用 placeholder 属性 ， 所 以 这 个 文本 框 中 就 没 
有 提示 信息 。 在 Chrome 浏览 器 中 的 运行 效果 如 图 3-30 所 示 。 
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图 3-30 用 户 姓名 文本 框 中 设置 placeholder 属性 的 效果 图 


3.3.9” pattern 属性 


pattern 属性 可 以 提供 一 种 正则 表达 式 ， 用 来 验证 输入 字段 与 表达 式 是 否 匹 配 。 如 果 要 
进行 组 合式 的 验证 ， 就 要 使 用 pattem 属性 。 该 属性 支持 各 种 类 型 的 组 合 正则 表达 式 ， 用 来 
验证 对 应 文本 框 中 输入 的 内 容 。 


patterm 属性 适用 于 以 下 <input> 类 型 : text、search、url、telephone、email 
和 password 。 


下 面 通过 简单 的 案例 来 介绍 pattem 属性 的 用 法 。 

【实践 案例 3-17】 

创建 patternform html 页 面 ， 在 form 表单 中 新 建 3 个 文本 框 用 于 输入 登录 名 、 登 录 密 
码 和 电子 邮箱 ， 实 现 验证 输入 字段 与 表达 式 是 否 匹配 的 操作 。 有 具体 代码 如 下 所 示 : 


上 述 代码 在 密码 的 文本 框 中 使 用 到 了 pattem 属性 ， 用 来 限制 密码 的 格式 和 长 度 ， 如 果 
实际 答 入 内 容 与 表达 式 不 匹配 ， 则 页 面 显 示 错 误 提 示 。 在 不 同 的 浏览 器 中 所 显示 的 效果 不 
同 ， 在 Chrome 浏览 器 和 Opera 浏览 器 中 的 运行 效果 分 别 如 图 3-31 和 图 3-32 所 示 。 
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图 3-31 Chrome 浏览 器 效果 图 3-32 ”Opera 浏览 器 效果 图 


patterm 一 “Ww{6，12}” 中 的 “Ww” 表 示 匹 配 包括 下 划 线 的 任何 单词 字符 。 等 价 
于 “[A-Za-z0-9 ]”， 而 {6，12} 表 示 密 码 长 度 在 6~12 之 间 。 


3.3.10 required 属性 


required 属性 用 于 检测 输入 的 文本 内 容 是 否 为 空 。required 为 布尔 类 型 属性 ， 只 有 文本 
内 容 不 为 空 时 ， 该 属性 返回 true 值 ， 才 能 提交 表单 。 除 了 已 含有 默认 值 的 button 和 range 
元 素 外 ，required 属性 可 以 设置 任何 输入 类 型 。 一 旦 为 某 输入 框 设置 了 该 属性 ， 则 此 项 必 
填 ， 否 则 无 法 提交 表单 。 


required 属性 适用 于 以 下 <input> 类 型 : text、search、url、telephone、email、 
password、date pickers、number、checkbox、radio 和 file。 


下 面 通过 简单 的 案例 来 介绍 required 属性 的 用 法 。 

【实践 案例 3-18】 

创建 requiredform.html 页 面 , 在 form 表单 中 新 建 3 个 文本 框 用 于 输入 书 名 、 购 买 数量 
和 显示 价格 ， 并 添加 value 值 为 “提交 ”的 按钮 ， 实 现 检测 输入 框 是 否 为 空 的 操作 。 有 具体 
代码 如 下 所 示 : 


上 述 代码 在 书 名 和 购买 数量 的 文本 框 中 使 用 到 了 required 属性 , 因此 这 两 项 必须 填写 。 
在 不 同 的 浏览 器 中 所 显示 的 效果 不 同 ， 图 3-33 和 图 3-34 分 别 是 在 Chrome 浏览 器 和 Opera 
浏览 器 中 的 运行 效果 。 
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图 3-33 Chrome 浏览 器 效果 图 图 3-34 ”Opera 浏览 器 效果 图 


3.3.11 ”readonly 属性 


readonly 属性 与 disabled 属性 的 效果 类 似 ， 使 用 readonly 属性 的 字段 不 能 接受 焦点 也 
不 能 进行 编辑 。 但 是 与 disabled 属性 不 同 的 是 readonly 属性 的 值 可 以 与 表单 一 起 提交 。 

下 面 通过 简单 的 案例 来 介绍 readonly 属性 的 用 法 。 

【实践 案例 3-19】 

创建 readonlyform.html 页 面 , 在 form 表单 中 新 建 多 个 文本 框 分 别 用 于 输入 姓名 、 身份 
证 号 、 手 机 号 码 和 邮箱 地 址 ， 并 添加 value 值 为 “提交 ”的 按钮 ， 实 现 字 段 不 能 被 编辑 的 
操作 。 具 体 代 码 如 下 所 示 : 


-二 


上 述 代码 在 单 击 【 提 交 】 按 钮 时 会 触发 JavaScript 事件 中 的 check0 函 数 ， 在 check0 
函数 中 将 所 有 文本 框 的 readonly 属性 都 设置 为 tue， 这 时 文本 框 中 的 内 容 只 能 被 读 取 ， 不 
能 被 编辑 。JavaScript 事件 的 代码 如 下 所 示 : 


在 Chrome 浏览 器 中 的 运行 效果 如 图 3-35 所 示 。 
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图 3-35 使 用 readonly 属性 的 效果 图 


3.4 新 增 表 单元 素 


在 HTML 5 中 除了 新 增加 的 输入 类 型 和 表单 属性 之 外 ， 还 增加 了 许多 新 的 表单 元 素 ， 
其 中 常用 的 有 dataList 元 素 、keygen 元 素 、output 元 素 和 optgroup 元 素 。 这 些 元 素 的 加 入 ， 
极 大 地 丰富 了 表单 数据 的 操作 ， 优 化 了 用 户 的 体验 ， 本 节 将 介绍 这 些 新 增 表单 元 素 的 使 用 
方法 与 技巧 。 


3.4.1 datalist 元 素 


datalist 元 素 是 HTML 5 中 新 增 的 表单 元 素 , 它 的 作用 是 辅助 表单 中 文本 框 的 数据 和 输入。 
该 元 素 类 似 于 选择 框 〈select)， 但 是 当 用 户 想 要 设置 的 值 不 在 选择 列表 之 内 时 ， 允 许 其 自 
行 输入 。 

datalist 元 素 将 子 项 放 在 option 元 素 中 ， 在 使 用 时 只 需 将 input 元 素 的 list 属性 值 设置 
为 datalist 元 素 的 id 即 可 。 这 样 用 户 在 单 击 文本 框 准备 输入 内 容 时 ，datalist 元 素 以 列表 的 
形式 显示 在 文本 框 的 底部 , 提示 输入 字符 的 内 容 。 当 用 户 选 中 列表 中 的 某 个 选项 后 , datalist 
元 素 将 自动 隐藏 ， 文 本 框 中 显示 所 选择 的 内 容 。 


datalist 元 素 的 使 用 方法 如 以 下 代码 所 示 : 


3.4.2 ”keygen 元 素 


keygen 元 素 是 HTML 5 中 新 增 的 表单 元 素 , 它 用 于 表单 的 密 钥 生 成 器 字段 。keygen 元 
素 在 随 表单 提交 时 会 生成 两 个 密 钥 : 私密 钥 和 公 密 钥 ， 其 中 私密 钥 保存 在 客户 端 ， 公 密 钥 
发 送 到 服务 器 ， 由 服务 器 端 进 行 保存 。keygen 元 素 的 属性 值 有 以 下 几 种 。 

口 challenge 将 keygen 的 值 设置 为 在 提交 时 会 给 出 提示 。 

口 disabled 禁用 keygen 字段 。 

口 form 定义 该 keygen 字段 所 属 的 一 个 或 多 个 表单 。 

口 keytype 定义 生成 密 钥 使 用 的 算法 ， 默 认 值 为 rsa。 


口 name 定义 keygen 元 素 的 唯一 名 称 ,name 属性 用 于 在 提交 表单 时 获取 字段 的 值 。 
keygen 元 素 的 使 用 方法 如 以 下 代码 所 示 : 


3.4.3 ”output 元 素 


output 元 素 是 HTML 5 中 新 增 的 表单 元 素 ， 它 必须 属于 某 个 表单 或 通过 属性 指定 某 个 
表单 。output 元 素 可 以 显示 不 同类 型 表单 元 素 的 内 容 ， 并 且 该 元 素 可 以 与 input 元 素 建立 关 
联 ， 当 input 元 素 的 值 改变 时 会 自动 触发 JavaScript 事件 ， 这 样 就 可 以 十 分 方便 地 查 到 表单 
中 各 元 素 的 输入 内 容 。output 元 素 的 属性 主要 有 以 下 几 种 。 

口 for 定义 输出 域 相关 的 一 个 或 多 个 元 素 。 

口 form 定义 输入 字段 所 属 的 一 个 或 多 个 表单 。 

口 name 定义 对 象 的 唯一 名 称 (表单 提交 时 使 用 )。 


下 面 通过 简单 的 案例 来 介绍 output 元 素 的 用 法 。 

【实践 案例 3-20】 

创建 outputform.html 页 面 ， 在 form 表单 中 添加 2 个 文本 框 用 于 输入 商品 的 价格 ， 实 
现 两 个 数字 相 加 求 和 的 操作 。 具 体 代码 如 下 所 示 : 


在 Chrome 浏览 器 中 的 运行 效果 如 图 3-36 所 示 。 


3.4.4 optgroup 元 素 


一 般 情况 下 ,下拉 菜单 只 能 允许 一 种 类 型 的 选项 , 并 不 能 对 各 种 类 型 的 选项 进行 组 合 。 


而 使 用 optgroup 元 素 可 以 进行 不 同类 型 的 选项 的 组 合 。optgroup 元 素 的 属性 主要 有 以 下 
几 种 。 


图 3-36 使 用 output 元 素 的 效果 图 


口 label 定义 选项 组 的 标注 。 

口 disabled 在 其 首次 加 载 时 ， 禁 用 该 选项 组 。 

下 面 通 过 简单 的 案例 来 介绍 optgroup 元 素 的 用 法 。 

【实践 案例 3-21】 

创建 optgroupform html 页 面 ， 在 form 表单 中 添加 多 个 类 型 的 文本 框 分 别 用 于 输入 姓 
名 、 选 择 性 别 和 选择 所 属 学 校 班 级 ， 并 添加 value 值 为 “提交 ”的 按钮 ， 实 现下 拉 菜 单 中 
显示 不 同类 型 选项 组 合 的 操作 。 具 体 代码 如 下 所 示 : 


在 Chrome 浏览 器 中 的 运行 效果 如 图 3-37 所 示 。 
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图 3-37 ”使 用 optgroup 元 素 的 效果 图 


3.5 ”提交 时 的 验证 处 理 


HTML 5 不 仅 增加 了 大 量 的 输入 类 型 、 表 单 属 性 和 表单 元 素 ， 也 加 强 了 对 表单 元 素 进 
行 验证 的 功能 。 通 过 对 元 素 内 容 进 行 本 地 的 有 效 性 验证 ， 避 免 了 重复 提交 ， 同 时 也 减轻 服 


务 器 的 处 理 压力 。 
根据 验证 的 提交 方式 可 以 分 为 自动 验证 、 显 示 验 证 和 自 定义 验证 3 种 。 另 外 ， 还 可 以 
取消 验证 。 


3.5.1 自动 验证 


自动 验证 方式 是 HTML 5 表单 的 默认 验证 方式 ， 它 会 在 表单 提交 时 执行 自动 验证 ， 如 
果 验 证 不 通过 将 无 法 提交 。 

如 果 要 对 输入 的 内 容 进 行 限制 ， 则 可 以 使 用 下 面 的 属性 。 

口 required 属性 ”限制 在 提交 时 元 素 内 容 不 能 为 空 。 

口 pattern 属性 通过 正则 表达 式 限制 元 素 内 容 的 格式 ， 不 符合 格式 则 不 允许 提交 。 

口 min 属性 和 max 属性 限制 数字 类 型 输入 范围 的 最 小 值 和 最 大 值 ， 不 在 范围 内 不 

允许 提交 。 

口 step 属性 限制 元 素 的 值 每 次 增加 或 者 减少 的 基数 , 不 是 基数 倍数 时 不 允许 提交 。 

下 面 通过 综合 的 案例 来 介绍 自动 验证 方式 。 

【实践 案例 3-22】 

创建 zidongcheck.html 页 面 ,在 form 表单 中 添加 4 个 类 型 的 文本 框 分 别 用 于 输入 登录 
名 、 登 录 密 码 、 密 码 确认 和 电子 邮箱 ， 实 现 自动 验证 的 操作 。 具 体 代码 如 下 所 示 : 


在 Chrome 浏览 器 中 的 运行 效果 如 图 3-38 和 图 3-39 所 示 。 
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图 3-38 ”使 用 required 属性 的 验证 效果 
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图 3-39 使 用 pattern 属性 的 验证 效果 


3.5.2 ”显示 验证 


除了 上 节 讲 的 自动 验证 方式 之 外 , 在 HIML 5 中 还 可 以 调用 checkValidity0 函 数 对 表单 
中 所 有 元 素 内 容 或 者 单个 元 素 内 容 进行 有 效 性 的 验证 。HTML 5 中 的 form 元 素 、input 元 
素 、select 元 素 和 textarea 元 素 都 具有 checkValidity0 函 数 ，checkValidity0 函 数 以 boolean 
的 形式 返回 验证 结果 。 另 外 ，form 元 素 和 input 元 素 都 存在 一 个 validity 属性 ， 这 个 属性 返 
回 ValidityState 对 象 。 

下 面 通 过 简单 的 案例 来 介绍 显示 验证 方式 。 

【实践 案例 3-23】 

创建 xianshicheck.html 页 面 , 在 form 表单 中 添加 多 个 类 型 的 文本 框 分 别 用 于 输入 姓名 、 
年 龄 、 性 别 和 固定 电话 ， 并 添加 value 值 为 “提交 ”的 按钮 ， 结 合 JavaScript 脚本 来 实现 显 
示 验 证 的 操作 。 有 具体 代码 如 下 所 示 : 


上 述 代码 在 姓名 和 国定 电话 的 文本 框 中 都 设置 了 required 属性 ， 限 制 了 姓名 和 固定 电 
话 都 不 能 为 空 ， 单 击 【提交 】 按 钮 会 触发 onclick 事件 ， 调 用 check0O 函 数 ，JavaScript 中 的 
代码 如 下 所 示 : 


上 述 代 码 在 Chrome 浏览 器 中 的 运行 效果 如 图 3-40 和 图 3-41 所 示 。 


丫 显 示 验 证 方式 x 3 
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图 3-40 ”验证 姓名 是 否 为 空 效果 图 图 3-41 ”验证 固定 电话 格式 是 否 正确 效果 图 


3.5.3 自 定 义 验证 


HTML 5 不 仅 提供 了 自动 验证 和 显示 验证 , 同时 还 提供 了 对 input 元 素 输入 内 容 进 行 有 
效 性 检查 的 功能 ， 如 果 检 查 不 通过 ， 浏 览 器 会 显示 “错误 ”的 提示 信息 。 但 是 很 多 时 候 开 
发 人 员 希 望 使 用 自 定义 的 信息 作为 错误 提示 ， 这 时 候 就 需要 使 用 setCustomValidity0 函 数 。 

setCustomValidity(0) 函 数 适用 于 HTML 5 中 的 所 有 input 元 素 ,， 通常 都 是 结合 JavaScript 
脚本 来 调用 setCustomValidity() 函 数 。 例 如 若 要 验证 表单 中 密码 的 长 度 是 否 符合 规定 的 长 
度 ，JavaScript 代码 如 下 所 示 : 


3.5.4 取消 验证 


如 果 不 想 对 表单 的 所 有 元 素 都 进行 验证 ， 那 么 就 需要 用 到 取消 验证 。HIML 5 为 表单 
增加 了 一 个 新 的 novalidate 属性 ， 该 属性 用 于 取消 对 表单 全 部 元 素 的 有 效 性 验证 。 默 认 情 
况 下 ， 表 单 该 属性 的 值 为 false， 即 在 提交 时 对 每 个 元 素 进行 内 容 检查 ， 只 有 所 有 元 素 都 相 
符 ， 表 单 才能 提交 ， 和 否则 就 会 提示 错误 信息 。 

如 果 不 想 对 表单 元 素 进行 验证 ， 就 可 以 为 form 添加 novalidate 属性 , 并 设置 值 为 true， 
从 而 使 表单 提交 时 的 验证 失效 。 

代码 如 下 所 示 : 


者 如 果 只 是 想 让 表单 中 的 某 个 元 素 不 被 验证 ， 也 可 以 使 用 该 属性 。 | 


3.6 项 目 案例 : 设计 购物 网 站 注册 页 面 


HTML 5 的 出 现 解决 了 在 表单 交互 过 程 中 数据 的 验证 问题 ， 不 再 需要 编写 大 量 的 
JavaScript 代码 ， 提 高 了 开发 的 效率 。 在 本 节 之 前 已 经 通过 大 量 的 实践 案例 讲解 了 HTML 5 
中 新 增加 的 输入 类 型 、 表 单 属性 、 表 单元 素 以 及 提交 时 的 验证 处 理 。 本 节 将 通过 以 上 所 学 
的 知识 设计 购物 网 站 登录 页 面 ， 加 深 读者 对 这 些 知识 的 理解 。 

【实例 分 析 】 

随 着 人 民生 活 质 量 的 不 断 提高 ， 网 上 购物 越 来 越 受 大 家 的 青睐 ， 足 不 出 户 就 可 以 买 到 
自己 喜欢 的 商品 。 本 节 项 目 案例 主要 使 用 HTML 5 新 增 输 入 类 型 、 表 单 属性 和 表单 元 素来 
实现 购物 网 站 注册 页 面 的 功能 。 

实现 注册 页 面 的 主要 步骤 如 下 : 

(1) 首先 在 form 表单 中 新 建 类 型 为 text 的 文本 框 ， 用 于 输入 登录 名 。 设 置 该 文本 框 的 
required 属性 、placeholder 属性 和 autofocus 属性 ， 使 文本 框 不 能 为 空 ， 显 示 提 示 信 息 并 且 
当 页 面 加 载 时 自动 获得 焦点 。 具 体 代码 如 下 所 示 : 


(2) 在 form 表单 中 新 建 两 个 类 型 为 password 的 文本 框 ， 用 于 输入 密码 和 再 次 输入 密 
码 。 同 样 设 置 这 两 个 文本 框 的 required 属性 、placeholder 属性 。 另 外 在 密码 的 文本 框 中 添 
加 pattermn 属性 ， 用 于 验证 输入 密码 与 表达 式 是 否 匹 配 。 有 具体 代码 如 下 所 示 : 


(3) 在 form 表单 中 新 建 类 型 为 radio 的 元 素 用 于 选择 性 别 ， 新 建 类 型 为 file 的 文本 框 
用 于 上 传 头像 ， 并 在 上 传 头像 的 文本 框 中 设置 multiple 属性 用 于 选择 多 张 图 片 。 具 体 代码 
如 下 所 示 : 


(4) 在 form 表单 中 新 建 类 型 为 telephone 的 文本 框 用 于 输入 电话 号 码 ， 新 建 类 型 为 
email 的 文本 框 用 于 输入 电子 邮箱 ， 设 置 它们 的 placeholder 属性 ， 使 其 显示 提示 信息 。 并 
在 电话 号 码 的 文本 框 中 设置 pattem 属性 ， 规 定 电话 号 码 的 格式 。 具 体 代码 如 下 所 示 : 


(5) 在 form 表单 中 新 建 类 型 为 checkbox 的 文本 框 用 于 选择 爱好 。 具 体 代码 如 下 所 示 : 


(6) 在 form 表单 中 新 建 多 个 文本 框 用 于 输入 出 生日 期 ， 其 中 日 期 为 number 类 型 。 具 
体 代码 如 下 所 示 : 


(7) 在 form 表单 中 新 建文 本 框 用 于 选择 所 在 省 市 ， 使 用 optgroup 元 素 使 下 拉 菜 单 多 
许 各 种 类 型 的 选项 进行 组 合 。 具 体 代码 如 下 所 示 : 


(8) 根据 上 面 的 操作 步 又， 购物 网 站 注册 页 面 已 经 设计 完成 ， 最 终 运行 效果 如 图 3-42 
所 示 。 


图 3-42 ”购物 网 站 注册 页 面 最 终 效 果 


3.7 “习题 
一 、 填 空 题 
1. 如 果 允 许 用 户 输入 一 串 喜 号 分 隔 的 邮箱 地 址 ， 那 么 应 该 将 属性 值 设 为 
true。 
2. 如 果 要 实现 验证 电话 的 功能 ， 需 要 将 telephone number 类 型 与 属性 一 起 
使 用 
3. 一 个 页 面 有 个 表单 元 素 可 以 设置 autofocus 属性 。 
4. 使 用 属性 可 以 在 输入 框 中 显示 提示 信息 。 
5. 属性 用 于 检测 输入 的 文本 内 容 是 否 为 空 。 
6， 与 output 元 素 有 关 的 事件 是 ， 在 关联 的 内 容 发 生变 化 时 触发 该 事件 。 
7. 使 用 自 定义 验证 显示 错误 信息 时 ， 需 要 调用 方法 。 
8. 如 果 想 要 禁用 某 个 控件 ， 需 要 使 用 属性 。 
二 、 选 择 题 
1. 可 以 自动 验证 邮箱 地 址 是 否 符 合 正确 格式 的 是 类 型 。 
A. email 
B. ul 
C. range 
D. search 
2. 下 列 选项 中 类 型 不 属于 HTML 5 中 的 时 间 日 期 类 型 。 
A. date 
B. time 


C. week 


己 


. day 
条 属性 规定 当 页 面 加 载 时 input 元 素 自动 获得 焦点 。 
. autocomplete 
. placeholder 
. autofocus 
required 
用 属性 的 字段 不 能 接受 焦点 也 不 能 进行 编辑 。 
A. multiple 
B. readonly 
C. disabled 
D. required 
5. 使 用 元 素 可 以 使 下 拉 菜 单 中 各 种 类 型 的 选项 进行 组 合 。 
A. datalist 
B. keygen 
C. output 
D. optgroup 
6. 下 列 选项 中 不 属于 HTML 5 中 新 增 类 型 的 是 


A. range 


礼 口 D> 


B. password 
C. color 
D. number 
7. 下 列 属 性 中 可 以 提供 一 种 正则 表达 式 用 来 验证 输入 字段 与 表达 式 是 否 匹 配 的 是 
A. disabled 
B. multiple 
C. pattern 
D. form 
8.， 如 果 要 实现 一 个 以 滑动 条 的 形式 展示 数字 的 效果 ， 则 要 使 用 下 列 类 型 。 
A. number 
B. range 
C. telephone number 
D. date 


三 、 上 机 练习 


1. 实现 注册 页 面 


在 Dreamweaver 中 新 添加 HTML 页 面 , 在 页 面 的 合适 位 置 添加 表单 元 素 、 输入 类 型 和 
表单 属性 (如 email 类 型 、telephone 类 型 、required 属性 和 placeholder 属性 等 )， 页 面 的 最 
终 运行 效果 如 图 3-43 所 示 。 


© 3 CC Dfile:///c:/zljvork/vanyiregister.htal 


图 3-43 上 机 实践 运行 效果 


3.8 ”实践 疑难 解答 


3.8.1 如 何 区 分 使 用 method 属性 的 参数 值 get 和 post 


| 面 弹 如何 区 分 使 用 method 属性 的 参数 值 get 和 post 
[Et 网络 课堂 ，http://bbs.itzcn.com/thread-19725-1-1.html 


【问题 描述 ]; 各 位 前 辈 好 ， 我 最 近 学 习 HTML 的 相关 知识 。 在 使 用 method 属性 指定 


表单 的 运行 方式 时 ， 不 知道 该 如 何 区 分 get 和 post， 它 们 之 间 的 区 别 是 什么 ?使 用 时 又 该 


注 


E 意 哪些 问题 呢 ? 
【解决 办 法 】 这 位 同学 你 好 ， 首先 应 该 明白 method 属性 作用 是 : 当 用 户 在 表单 中 的 提 


交 按 钮 上 单 击 后 ， 指 定 将 表单 数据 发 送 到 何 处 ， 即 处 理 表单 数据 的 服务 器 所 在 的 地 址 。 接 
下 来 就 要 区 分 它 的 两 个 属性 值 get 和 post。 虽然 这 两 种 方法 都 是 数据 的 提交 方式 , 但 是 在 实 
际 传输 时 却 有 很 大 的 区 别 。 它 们 的 区 别 主 要 如 下 。 


口 get 方式 用 来 从 服务 器 上 获得 数据 ; 而 post 方式 用 来 向 服务 器 上 传送 数据 。 

口 get 方式 是 把 参数 数据 队列 加 到 提交 表单 的 action 属性 所 指 的 URL 中 ， 值 和 表单 
内 各 个 字段 一 一 对 应 ， 添 加 到 action 所 指向 的 URL 后 面 ， 并 且 两 者 使 用 “?” 连 
接 ， 而 各 个 变量 之 间 使 用 “&” 连 接 ， 在 URL 中 可 以 看 到 ; 而 post 方式 是 通过 
HTTP post 机 制 ， 将 表单 内 各 个 字段 与 其 内 容 放置 在 form 的 数据 体 中 ， 按 照 变量 
和 值 相对 应 的 方式 传送 到 action 属性 所 指 的 URL 地 址 ， 用 户 看 不 到 这 个 过 程 。 

口 对 于 get 方式 , 服务 器 端 用 Request.QueryString 获取 变量 的 值 ; 而 对 于 post 方式 ， 
服务 器 端 用 RequestForm 获取 提交 的 数据 。 


口 get 方 式 传送 的 数据 量 较 小 , 不 能 大 于 2KB, 这 主要 是 受 URL 长 度 的 限制 ; 而 post 
方式 传送 的 数据 量 较 大 ， 一 般 默 认为 不 受 限制 。 因 此 ， 在 上 传 文件 时 只 能 用 post 
口 get 方式 安全 性 非常 低 ， 因 为 在 传输 过 程 中 ， 数 据 被 放 在 请 求 的 URL 中 ， 而 现在 
很 多 服务 器 、 代 理 服务 器 或 者 用 户 代理 都 会 将 请 求 URL 记录 到 日 志文 件 中 ， 然 后 
放 在 某 个 地 方 ， 这 样 可 能 会 有 一 些 隐私 的 信息 被 第 三 方 看 到 。 用 户 在 浏览 器 上 直 
接 看 到 提交 的 数据 ， 一 些 系统 内 部 的 信息 将 会 一 同 显示 在 数据 面前 。 而 post 方式 
安全 性 较 高 。 但 是 get 方式 的 执行 效率 却 比 post 方式 好 。 
口 get 方 式 限制 表单 的 数据 集 的 值 必 须 为 ASCII 字 符 ; 而 post 方 式 支持 整个 ISO 10646 
字符 集 。 
了 解 了 get 方式 与 post 方式 的 区 别 之 后 ， 在 使 用 时 就 要 注意 不 同 的 情况 使 用 不 同 的 方 
式 。get 是 form 的 默认 方式 ， 在 数据 查询 时 ， 建 议 使 用 该 方式 ， 但 在 数据 增加 、 修 改 或 者 
删除 的 情况 下 建议 使 用 post 方式 。 包 含 机 密 信 息 的 情况 下 ， 也 建议 使 用 post 方式 。 


3.8.2 ”HTML 5 在 自 定义 验证 时 无 法 显示 错误 提示 信息 


项 王 HTrMr 5 在 自 定义 验证 时 无 法 显示 错误 提示 信息 
La 网 络 课堂 : http://bbs.itzcn.com/thread-19726-1-1.html 


【问题 描述 】， 各 位 前 辈 好 ， 我 在 学 习 HIML 5 中 提交 时 的 自 定义 验证 处 理 时 遇 到 了 一 
些 问 题 ， 编 写 JavaScript 代码 却 无 法 显示 错误 提示 信息 。 我 使 用 了 多 个 浏览 器 (如 谷歌 浏 
览 器 、 正 浏览 器 和 火狐 浏览 器 ) 进行 测试 , 但 是 每 个 浏览 器 都 没有 反应 , 这 是 什么 问题 呢 ? 

【解决 办 法 】 这 位 同学 你 好 ， 当 需要 使 用 自 定义 的 信息 作为 错误 提示 时 ， 需 要 使 用 
setCustomValidity0 方 法 ， 而 你 所 使 用 的 浏览 器 的 版 本 都 不 支持 setCustomValidity0 方 法 。 支 
持 setCustomValidity0 方 法 的 目前 只 有 Opera 浏览 器 ， 所 以 你 可 以 使 用 Opera 浏览 器 来 进行 
测试 。 


基于 HTML S 的 多 媒体 支持 
第 4 章 


在 HTML 5 出 现 之 前 并 没有 将 视频 和 音频 嵌入 到 网 页 的 标准 方式 ，Adobe 的 Flash 
了 Player 之 类 的 插件 完全 由 Adobe 控制 。 现 在 很 多 时 挨 的 网 站 都 提供 视频 和 音频 文件 ， 而 在 
HTML 5 中 提供 了 展示 视频 的 标准 ， 这 也 是 许多 Web 开发 者 青睐 HTML 5 的 原因 之 一 。 

本 章 主要 讲解 了 在 HTML 5 中 插入 视频 和 音频 的 具体 操作 。 其 中 包括 视频 和 音频 的 解 
码 器 ， 视 频 元 素 属性 、 方 法 及 事件 ， 音 频 元 素 的 属性 和 事件 等 内 容 。 它 们 的 加 入 使 得 浏览 
器 能 够 以 一 种 更 快捷 的 方式 来 处 理 视频 和 音频 文件 。 相 信 读 者 通过 本 章 的 学 习 会 对 HTML 
5 中 创建 音频 和 视频 有 更 深入 的 了 解 。 


本 章 学 习 要 点 : 

> 了 解 视频 和 音频 的 解码 器 

> 熟悉 在 HTML 5 中 视频 和 音频 的 支持 格式 

> 掌握 HTML 5 中 video 元 素 的 属性 、 方 法 及 事件 

> 掌握 HTML 5 中 audio 元 素 的 属性 和 事件 

> 熟练 掌握 在 HTML 5 中 添加 视频 和 音频 

> 熟练 掌握 在 HTML 5 中 对 视频 、 音 频 的 一 些 常见 操作 


4.1 HTML 5 中 多 媒体 的 新 增 特 性 


截止 至 今 , 多 媒体 内 容 在 大 多 情况 下 都 是 通过 第 三 方 插件 或 集成 在 Web 浏览 器 上 的 应 
用 程序 放 到 网 页 上 的 。 此 类 插件 包括 RealPlayer、Silverlight 和 QuickTime 等 。 目 前 最 流行 
的 方法 是 通过 Adobe 的 Flash Player 插件 将 视频 和 音频 嵌入 到 网 页 中 。 

HTML 4 之 前 的 版 本 中 多 媒体 所 用 的 代码 复杂 元 长 而 且 需 要 第 三 方 的 插件 ，HTML 5 
中 引入 video 元 素 和 audio 元 素 解 决 了 此 问题 。 HTML 5 不 需要 用 户 下 载 第 三 方 插件 来 观看 
网 页 中 的 多 媒体 内 容 ， 并 且 视 频 和 音频 播放 器 更 容易 通过 脚本 访问 。 


4.2 多 媒体 的 支持 条 件 


虽然 HTML 5 的 视频 和 音频 在 理论 上 是 非常 优秀 的 ， 但 在 实际 的 操作 中 并 没有 那么 简 
单 。 在 用 HIML 5 创建 视频 和 音频 时 需要 考虑 多 媒体 的 新 元 素 、 浏 览 器 以 及 视频 音频 的 解 
码 器 等 众多 因素 。 下 面 来 介绍 视频 和 音频 的 编 解 码 器 。 


4.2.1 视频 和 音频 编 解 码 器 


视频 音频 编 解码 器 是 一 种 算法 ， 它 的 作用 是 对 一 段 特定 的 视频 或 音频 文件 进行 编码 和 
解码 ， 以 便 视 频 或 音频 能 够 正常 地 播放 。 编 解码 器 可 以 读 懂 特 定 的 容器 格式 ， 它 按照 接收 
方式 把 编码 过 的 数据 重组 为 原始 的 媒体 数据 。 


视频 编 解 码 器 定义 了 多 媒体 数据 流 编码 和 解码 的 算法 。 编 解码 器 可 以 对 数据 流 进行 编 
码 ， 使 之 用 于 传输 、 存 储 或 加 密 ， 或 者 可 以 对 其 解码 进行 回放 或 编辑 。 在 HTML 5 中 使 用 
视频 最 应 该 关注 的 是 对 数据 流 的 解码 以 及 回放 。 使 用 最 多 的 HIML 5 视频 解码 文件 是 
H.264、Theora、Ogg THeora 和 VP8。 


音频 编 解 码 器 与 视频 编 解码 器 的 工作 理论 是 一 样 的。 音频 播放 器 主要 是 涉及 声 流 而 不 
是 视频 帧 ， 使 用 最 多 的 音频 编 解 码 器 是 AAC、Ogg THeora 和 Vorbis。 


4.2.2 ”支持 视频 和 音频 的 浏览 器 


在 HTML 5 中 新 增 了 两 个 元 素 : video 元 素 和 audio 元 素 。video 元 素 和 audio 元 素 分 别 
播放 的 是 Web 页 面 上 的 视频 和 音频 。 到 目前 为 止 , 常用 的 浏览 器 Intemet Explorer 8 和 更 早 
版 本 的 Intermet Explorer 浏览 器 并 不 支持 HIML 5 中 的 video 元 素 和 audio 元 素 。 但 是 其 他 
的 一 些 浏览 器 给 予 了 HTML 5 中 video 元 素 和 audio 元 素 广泛 的 支持 ， 如 表 4-1 所 示 。 


表 4-1 浏览 器 对 video 元 素 和 audio 元 素 的 支持 情况 


上 版 本 
Safari 3.2 及 以 上 版 本 
Opera 10.5 及 以 上 版 本 
Firefox 3.5 及 以 上 版 本 
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图 4-1 Opera 浏览 器 图 4-2 Chrome 浏览 器 图 4-3 ”Firefox 浏览 器 


加 o 辣 如 口 | 


4.2.3 多 媒体 的 格式 


HTML 5 中 用 video 元 素 或 audio 元 素 添加 的 视频 或 音频 文件 若 要 在 Web 页 面 中 加 载 
播放 , 必须 要 用 正确 的 多 媒体 格式 。 不 同 的 浏览 器 对 video 元 素 和 audio 元 素 的 支持 情况 也 
不 相同 ， 下 面具 体 介 绍 HTML 5 中 视频 和 音频 的 一 些 常见 格式 。 


视频 格式 包含 视频 编码 、 音 频 编码 和 容器 格式 ， 编 码 又 包含 编码 和 解码 。 视 频 编码 作 
为 动词 指 的 是 将 动态 的 图 像 信 息 转化 为 二 进 制 数据 的 过 程 ， 其 逆 过 程 称 为 视频 解码 。 视 频 
编码 作为 名 词 则 通常 指 的 是 某 种 特定 的 编码 方式 。 同 样 的 概念 也 适用 于 音频 编码 ， 只 不 过 
它 转化 的 是 声音 信息 。 大 多 数 视频 文件 都 同时 包含 视频 和 音频 ， 因 此 编码 后 至 少 都 有 两 组 
二 进 制 数据 ， 并且 两 组 数据 必须 按照 特定 的 方式 同步 起 来 ,否则 Web 用 户 看 到 的 画面 和 听 
到 的 声音 将 不 吻合 。 

在 HIML 5 中 video 元 素 常见 的 视频 格式 及 浏览 器 的 支持 如 表 4-2 所 示 。 


表 4-2 支持 video 格式 的 浏览 器 


10.5 及 更 高 版 本 


3.5 及 更 高 版 本 
H.264 9.0 及 更 高 版 本 无 无 5.0 及 更 高 版 本 
MPEG-4 9.0 及 更 高 版 本 无 无 5.0 及 更 高 版 本 
WebM 9.0 及 更 高 版 本 4.0 及 更 高 版 本 ”10.6 及 更 高 版 本 “6.0 及 更 高 版 本 


表 4-2 中 一 些 视频 格式 的 介绍 具体 如 下 。 

口 Ogg 是 带 有 Thedora 视频 编码 和 Vorbis 音频 编码 的 Ogg 文件 。 

口 H.264 是 目前 公认 的 效率 最 高 的 视频 编码 。 它 是 由 国际 电信 联盟 通电 信 标 准 部 
(TU-T) 和 国际 标准 化 组 织 /国际 电工 委员 会 动态 图 像 专家 组 (ISOTIEC MPEG) 共 同 
开发 的 一 种 视频 压缩 技术 ， 它 的 另外 一 个 名 称 是 MPEG-4 AVC。 目 前 HH.264 被 广 
泛 地 运用 在 蓝光 电影 、 数 字 电视 、 卫 星 电视 、 网 络 媒体 等 领域 。 可 以 说 H264 是 
目前 被 运用 得 最 为 广泛 的 视频 编码 。 

口 MPEG-4 是 ISO/IEC 标准 的 视频 、 音 频 编 码 标准 ， 通 常 也 是 MP4 文件 。 

口 WebM 是 Google 基于 开源 容器 格式 Matroska (对 于 .mkv 很 多 朋友 应 该 不 陌生 ) 
而 专门 开发 的 一 种 新 型 容器 格式 。 其 目的 是 用 来 封装 VP8 编码 的 视频 和 Vorbis 编 
码 的 音频 数据 以 供 网 络 媒体 使 用 。 


在 HIML 5 中 audio 元 素 的 常见 音频 格式 和 浏览 器 对 audio 元 素 的 支持 情况 如 表 4-3 
所 示 。 
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表 4-3 支持 audio 格式 的 浏览 器 


音频 格式 JInternet Explorer 浏览 器 。 Firefox 浏览 器 。 Opera 浏览 器 Chrome 浏览 器 

Ogg Vorbis 无 3.5 及 更 高 版 本 10.5 及 更 高 版 本 5.0 及 更 高 版 本 

MP3 9.0 及 更 高 版 本 无 无 5.0 及 更 高 版 本 

Wav PCM 9.0 及 更 高 版 本 3.5 10.5 及 更 高 版 本 无 

ACC 9.0 及 更 高 版 本 无 无 5.0 及 更 高 版 本 

WebM 音频 “无 4.0 及 更 高 版 本 ”10.6 及 更 高 版 本 6.0 及 更 高 版 本 
表 4-3 中 一 些 音频 格式 的 介绍 具体 如 下 : 


口 Vorbis 是 类 似 AAC 的 另 一 种 和 免费、 开源 的 音频 编码 ， 由 非 盈利 组 织 Xiph 开发 。 
业界 的 普遍 共识 是 Vorbis 是 和 AAC 一 样 优秀 、 用 以 替代 MP3 的 下 一 代 音 频 压缩 
技术 。 

口 AAC 是 ISO/IEC 标准 化 的 音频 编码 。 它 是 比 MP3 更 先进 的 音频 压缩 技术 ， 目 的 
在 于 取代 陈旧 的 MP3.AAC 音频 编码 被 广泛 地 运用 在 数字 广播 .数字 电视 等 领域 。 


法 ) 在 页 面 上 加 载 视频 或 音频 的 格式 必须 是 HTML 5 中 支持 的 多 媒体 格式 。 | 


4.3 在 HTML 5 中 创建 视频 


在 上 


4 


“了. 笃 


习 了 HTML 5 中 添加 视频 的 一 些 常 用 知识 ， 想 必 读 者 对 HIML 5 中 如 何 添 


加 视频 有 了 初步 的 了 解 。 这 一 节 主 要 介绍 video 元 素 的 属性 、 方 法 和 事件 ， 使 读者 能 够 熟 
练 地 使 用 video 元 素 显 示 视 频 。 


4.3.1 video 元 素 的 属性 


HTML 5 规定 了 一 种 通过 video 元 素来 包含 视频 的 标准 方法 , 其 中 不 同 的 video 元 素 属 
性 表示 视频 的 不 同 播放 特性 。 例 如 height 属性 表示 视频 播放 器 的 高 度 ，width 属性 表示 视 


频 播放 器 的 宽度 等 。 


下 面 通过 表 4-4 来 具体 了 解 video 元 素 中 的 属性 。 


属性 名 称 
autoplay 
controls 
loop 
perload 


STC 
buffered 
currentTime 


表 4-4 video 元 素 属性 


属性 描述 

当前 网 页 完成 载 入 后 自动 播放 

向 用 户 显示 控件 ， 比 如 播放 按钮 、 停 止 按 钮 等 

视频 结束 时 重新 开始 播放 

是 否 在 页 面 加 载 完成 后 载 入 视频 ， 如 果 使 用 了 autoplay， 则 忽略 该 属性 none、 
metadate 和 auto， 其 默认 值 是 auto 

所 播放 视频 的 url 地 址 

返回 一 个 实现 TimeRanges 接口 的 对 象 ， 以 确认 浏览 器 是 否 已 缓冲 媒体 数据 
返回 媒体 文件 当前 播放 时 间 ， 也 可 以 修改 该 时 间 属 性 
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属性 名 称 属性 描述 

startTime 返回 多 媒体 开始 播放 的 时 间 

duration 返回 多 媒体 元 素 总 体 播放 的 时 间 

played 获取 媒体 文件 以 播放 完成 的 时 间 段 

paused 返回 当前 播放 的 文件 是 否 处 于 暂停 状态 

ended 返回 当前 播放 文件 是 否 结束 

playbackRate 返回 当前 正 播 放 的 媒体 文件 的 速度 频率 

volume 媒体 元 素 播 放 的 音量 

muted 是 否 设 置 为 静音 

height 设置 视频 播放 器 的 高 度 

width 该 属性 表示 设置 视频 播放 器 的 宽度 

poster 用 于 指定 一 张 图 片 ， 该 图 片 在 当前 视频 数据 无 效 显示 ， 视 频数 据 无 效 可 能 是 
视频 正在 加 载 ， 也 可 能 是 视频 地 址 错误 

networkState 返回 视频 文件 的 网 络 状态 

readyState 返回 媒体 当前 播放 位 置 的 就 绪 状态 

error 只 读 属性 。 在 多 媒体 元 素 加 载 或 读 取 文件 过 程 中 ， 如 果 出 现 错误 ， 将 触发 元 
素 的 error 事件 。 通 过 元 素 的 error 属性 返回 当前 的 错误 值 

defaultPlaybackRate 返回 页 面 媒 体 元 素 默 认 的 文件 播放 速度 频率 , 即 默 认 播 放 速 率 。 一 般 情况 下 ， 
该 属性 值 是 1 

【实践 案例 4-1】 


在 Dreamweaver CS5 中 创建 一 个 新 页 面 ， 并 在 此 页 面 中 添加 一 个 高 度 为 300、 宽 度 为 
600 的 视频 。 具 体 代 码 如 下 : 


<video src="xiong.webm" height="300" width="600" autoplay="true" loop= 


"true" controls="controls" > 


</video> 


上 述 代码 中 属性 autoplay 的 值 为 true 表示 载 入 视频 后 自动 播放 ， 属 性 loop 的 值 为 tue 
表示 在 视频 结束 时 自动 播放 , 属性 controls 的 值 为 controls 表示 视频 播放 时 浏览 器 下 面 有 控 
制 按钮 。 本 案例 在 浏览 器 中 的 效果 如 图 4-4 所 示 。 


图 4-4 插入 视频 


4.3.2 video 元 素 的 方法 


在 HTML 5 中 video 元 素 常 用 的 播放 方法 主要 有 3 种 ， 方 法 具体 说 明 如 下 所 示 。 

口 play0 播放 视频 ， 会 将 paused 的 值 强行 设 为 false。 

口 pause0 暂停 视频 ， 会 将 paused 的 值 强行 设 为 true。 

口 load0 重新 载 入 视频 ,会 将 playbackRate 的 值 强行 设 为 defaultPlayBackRate 的 值 ， 

且 强 行将 error 的 值 设 为 null。 

【实践 案例 4-2】 

在 HIML 5 加 载 一 个 视频 ， 用 video 元 素 的 方法 playO0、pause0 和 load0 分 别 来 实现 视 
频 的 播放 、 和 暂停 和 重新 播放 的 功能 。 实 现 该 功能 的 具体 步骤 如 下 : 

(1) 在 Dreamweaver CS5 中 新 建 HTML 页 面 ， 然 后 在 页 面 的 合适 位 置 添加 video 元 素 
和 4 个 button 元 素 ， 它 们 分 别 用 来 显示 视频 和 对 视频 执行 操作 。 有 具体 代码 如 下 所 示 : 


(2) 单 击 【播放 /和 暂停】 按钮 时 触发 其 onclick 事件 并 调用 JavaScript 脚本 中 的 函数 
playPause0， 该 函数 主要 实现 视频 的 播放 或 暂停 的 功能 。 有 具体 代码 如 下 所 示 : 


上 述 代 码 playPause0 函 数 中 还 使 用 了 pause0 方 法 和 play0 方 法 。 当 页 面 加 载 视频 后 如 
果 页 面 是 暂停 状态 ， 那 么 使 用 play0 方 法 来 实现 视频 的 播放 功能 ， 如 果 是 播放 状态 那么 使 
用 pause() 方 法 来 实现 视频 的 暂停 功能 。 
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(3) 单 击 【 重 新 播放 】 按 钮 时 也 触发 了 onclick 事件 并 调用 JavaScript 脚本 中 的 函数 
again()， 函 数 again0 中 的 load0 方 法 实现 了 视频 的 重新 播放 功能 。 具 体 代码 如 下 所 示 : 


function again() 
{ 

myVideo.load(); 
} 


(4) 单 击 【 放 大 视频 】 和 【缩小 视频 】 按 钮 能 实现 视频 播放 页 面 的 大 小 转换 ， 此 功能 
调用 的 JavaScript 脚本 中 的 函数 分 别 是 makeBig0 和 makeSmall0。 具 体 代 码 如 下 所 示 : 


function makeBig () 


{ 

myVideo.width=560; 
} 
function makeSmall () 
{ 

myVideo.width=320; 
} 


当 视 频 加 载 播放 后 页 面 的 大 小 会 是 video 元 素 
中 的 默认 值 。 单 击 【 放 大 视频 】 按 钮 video 元 素 的 
width 属性 值 变 为 560, 单 击 【 缩 小 视频 】 按 钮 video 
元 素 的 width 属性 值 变 为 320。 

(5) 综合 上 述 4 个 步 又 , 视频 在 浏览 器 中 的 效 
果 如 图 4-5 所 示 。 


4.3.3 video 元 素 的 事件 


图 4-5 video 元 素 方法 实现 视频 的 播放 控制 

媒介 事件 是 指 视频 、 图 像 以 及 音频 等 媒介 触发 的 事件 ， 适 用 于 所 有 HTML 5 元 素 。 不 
过 在 媒介 元 素 中 audio、embed img 、 image 和 video 最 为 常用 。 媒介 事件 主要 包括 loadstart、 
progress、suspend、about、error、emptied、stalled、Pplay、pause、seeking、seeked、timeupdate、 
ended 和 volumechange 等 。 


video 元 素 中 常用 的 事件 如 表 4-5 所 示 。 


表 4-5 video 元 素 事件 表 


事件 名 称 事件 描述 

loadstart 浏览 器 开始 请 求 媒介 时 运行 脚本 

progress 浏览 器 正在 获取 媒介 数据 时 运行 脚本 

suspend 浏览 器 已 经 在 获取 媒介 数据 ， 但 在 去 取 回 整个 媒介 文件 之 前 停止 时 运行 脚本 
about 浏览 器 发 生 中 止 事 件 时 运行 脚本 

elror 获取 媒介 出 错 ， 有 错误 发 生 时 ， 才 发 送 这 个 事件 。 另 外 还 有 一 个 error 属性 
emptied 媒介 资源 元 素 突然 为 空 时 〈 网 络 错误 、 加 载 错误 等 ) 运行 脚本 

stalled 浏览 器 获取 媒介 数据 过 程 中 (延迟 0) 存在 错误 时 运行 脚本 


play 媒介 数据 即将 开始 播放 时 运行 脚本 
pause 媒介 数据 暂停 播放 时 运行 脚本 
loadeddate 加 载 当前 播放 位 置 的 媒体 数据 时 运行 脚本 
loadedmetadata 加 载 完毕 媒体 元 素数 据 时 ， 发 送 此 事件 。 它 将 包括 尺寸 、 时 长 和 文件 轨道 等 
playing 表明 媒体 已 经 开始 播放 
canplay 浏览 器 可 以 开始 媒介 播放 ， 且 估计 以 当前 速率 播放 不 能 直接 将 媒介 播放 完 〈 播 放 
期 间 需 要 缓冲 ) 
canplaythrough 以 浏览 器 当前 速率 直接 播放 可 以 直接 播放 完整 个 媒介 资源 〈 期 间 不 需要 缓冲 
seeking 当 搜 索 操作 开始 时 ， 发 送 此 事件 〈seeking 属性 值 为 true) 
seeked 当 浏 览 器 停止 请 求 数据 、 搜 索 操作 完成 时 ， 引 发 该 事件 (seeked 属性 值 为 false》 
timeupdate 当 媒 介 改变 其 播放 位 置 时 运行 脚本 
Volumechange 音量 (volume 属性 ) 改变 或 静音 muted) 时 触发 事件 
【实践 案例 4-3】 


下 面 在 Dreamweaver CS5 中 新 建 一 个 页 面 并 在 此 页 面 中 插入 一 个 视频 ， 在 视频 中 添加 
一 个 按钮 实现 设置 静音 的 功能 。 当 单 击 按钮 时 视频 播放 效果 为 静音 ， 再 次 单 击 按钮 时 静音 
取消 。 具 体 步骤 如 下 所 示 : 

(1) 创建 新 页 面 并 在 此 页 面 中 添加 一 个 视频 ， 在 页 面 合适 的 位 置 添 加 两 个 按钮 实现 设 
置 静音 和 取消 静音 的 功能 。 具 体 代 码 如 下 所 示 : 


(2) 单 击 【 设 置 静 音 】 按 钮 触发 了 volumechange 事件 ， 在 JavaScript 脚本 中 调用 了 
silenced0) 函 数 。 具 体 代码 如 下 所 示 : 


视频 播放 时 video 元 素 的 muted 属性 的 默认 值 为 false, 当 单 击 【设置 静音 ] 按 钮 时 videol 
找到 播放 的 视频 并 将 其 muted 的 值 改 为 tue， 视 频 便 以 静音 播放 。 单 击 【 取 消 静 音 】 按 钮 
的 原理 和 【设置 静音 】 按 钮 的 原理 相同 。 

(3) 综合 上 述 步 又 ， 视 频 运行 效果 如 图 4-6 所 示 。 


和 1e:/N/F:/ 工 作 视 开 /video 元 天 要 伯 .hnl 


[EN 


全 。 


图 4-6 单 击 触 发 静音 事件 


4.4 在 HTML 5 中 创建 音频 


上 一 节 学 习 了 HTML 5 中 video 元 素 的 属性 、 方 法 和 事件 。 在 HIML 5 中 添加 音频 的 
方法 和 添加 视频 的 方法 大 同 小 异 。 这 一 节 主 要 介绍 HTML 5 中 audio 元 素 的 属性 、 事 件 的 
有 具体 使 用 。 


4.4.1 _ audio 元 素 的 属性 


HIML 5 中 的 audio 元 素 能 够 播放 声音 文件 或 者 音频 流 。audio 元 素 的 属性 和 video 元 
素 相 比 少 了 3 个 属性 ， 它 们 分 别 是 poster、height 和 width。 除 了 这 3 个 属性 外 其 他 关于 音 
频 的 属性 参看 本 章 4.3.1 节 中 video 的 属性 表 。 

下 面 就 用 audio 元 素 中 的 一 些 常用 属性 在 HIML 5 中 添加 一 个 音频 。 

【实践 案例 4-4】 

用 audio 元 素 的 相关 属性 在 HIML 5 中 显示 一 段 音频 ， 让 这 段 音频 在 浏览 器 中 自动 播 
放 并 且 有 进度 条 。 具 体 代码 如 下 所 示 : 


%4s 
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上 述 代 码 中 controls 属性 表示 显示 播放 时 的 操作 按钮 , autoplay 属性 表示 视频 在 页 面 加 
载 后 自动 播放 ，loop 属性 表示 视频 结束 后 重新 开始 播放 。 
上 述 代 码 在 浏览 器 中 的 效果 如 图 4-7 所 示 。 


站 在 mm 5 中 插入 音频 


CG 0 file:///F:/ 工 作 视频 /在 HTHL%205 中 插入 音 . htal a (25) 


WN =e 3:16 A) e=—e 


图 4-7 在 Chrome 浏览 器 中 的 音频 


Opera 浏览 器 和 Firefox 浏览 器 同样 支持 HIML 5 中 的 audio 元 素 。 该 元 素 在 这 两 个 浏 
览 器 中 的 效果 分 别 如 图 4-8 和 图 4-9 所 示 。 


国 在 ML 5 中 插入 音 是 
忆 局 本 地 | lecslhost/7:/ 工 作 视 频 /在 ITWLY205 中 插入 音 . htal 


图 4-8 在 Opera 浏览 器 中 的 音频 图 4-9 在 Firefox 浏览 器 中 的 音频 


4.4.2 audio 元 素 的 事件 


前 面 已 经 学 习 了 关于 如 何 使 用 video 元 素 的 事件 显示 视频 的 一 些 操作 。 在 HTML 5 中 
audio 元 素 的 事件 和 video 元 素 的 事件 是 一 样 的 ， 有 具体 参看 本 章 4.3.3 的 video 事件 表 。 

【实践 案例 4-5】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 并 在 此 页 面 添加 一 个 音频 文件 ， 然 后 在 页 面 中 的 
音频 文件 上 添加 两 个 按钮 来 实现 音频 文件 音量 的 增 减 。 具 体 代码 如 下 所 示 : 

(1) 首先 创建 一 个 新 的 HTML 5 页 面 并 在 页 面 中 添加 一 个 音频 文件 ， 然 后 再 添加 两 个 

音量 的 按钮 。 具 体 代 码 如 下 所 示 : 


<div> 


<input id="addvoice" type="button" value=" 音 量 +" onclick="addvoice();" /> 

<input id="cutvoice" type="button" value=" 音 量 -" onclick="cutvoice();" /> 
</div> 
<div> 

<audio id="audio" autoplay controls src="mysong.mp3"> </audio> 
</div> 


(2) 单 击 【音量 +】 或 【音量 -】 按 钮 时 触发 onclick 事件 ， 分 别 调用 了 JavaScript 脚本 
中 的 addvoice0 函 数 和 cutvoice0 函 数 。 具 体 代 码 如 下 所 示 : 


<script type="text/javascript"> 
Var audio=document .getElementById ("audio"); 


if(audio.canPlayType) 


上 述 代码 中 调用 的 canPlayType() 方 法 测试 浏览 器 是 否 支持 指定 的 媒介 类 型 。 如 果 判 断 
浏览 器 支持 此 媒介 类 型 时 便 会 在 addvoice0 函 数 和 cutvoice0 函 数 中 分 别 执行 控制 音量 的 
代码 。 
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45 项 目 案例 : 制作 网 页 视频 播放 器 


本 章 主要 讲 了 HTML 5 中 的 多 媒体 支持 ， 其 中 包括 video 元 素 和 audio 元 素 的 属性 、 
方法 及 事件 等 知识 。 本 节 将 使 用 video 元 素 的 属性 、 方 法 及 事件 来 做 一 个 网 页 播放 器 ， 实 
现 播放 器 的 播放 、 和 暂停 、 快 进 、 快 退 及 静音 的 功能 。 

【实例 分 析 】 

制作 网 页 视频 播放 器 ， 主要 是 利用 HTML 5 中 video 元 素 的 属性 、 方法 及 事件 完成 的 。 
首先 要 用 HTML 5 中 video 元 素 的 属性 src 将 视频 插入 ， 然 后 用 playbackrate 属性 来 实现 视 


频 播 放 的 快 进 和 快 退 ， 最 后 使 用 一 个 muted 属性 来 实现 静音 与 取消 静音 的 功能 。 具 体 步 又 
如 下 所 示 。 

(1) 在 Dreamweaver CS5 中 创建 一 个 页 面 并 命名 为 casel, 在 casel 页 面 里 插入 一 个 视 
频 及 控制 视频 的 8 个 按钮 。 具 体 代 码 如 下 所 示 : 


上 述 代 码 中 video 元 素 一 共用 到 了 6 个 属性 ,它们 分 别 是 sre、width、height、autoplay、 
loop 和 controls。 其 中 sre 属性 表示 播放 视频 的 url 地 址 ，width 属性 和 height 属性 表示 插入 
视频 的 宽度 和 高 度 ，autoplay 属性 表示 网 页 完成 载 入 后 视频 自动 播放 ，loop 属性 表示 该 视 
频 如 果 播 放 结束 后 重新 开始 播放 ，controls 属性 表示 播放 视频 时 显示 的 播放 控件 。 

(2) 单 击 网 页 视频 播放 器 下 面 的 8 个 按钮 时 触发 的 事件 不 同 ， 调 用 的 JavaScript 脚本 
中 的 函数 也 不 相同 。 页 面 中 的 8 个 按钮 所 要 调用 的 JavaScript 函数 如 下 代码 所 示 : 


本 案例 共用 了 6 个 事件 分 别 是 loadstart、play、playing、pause、volumechange 和 error， 
下 面 会 一 一 介绍 每 个 事件 的 用 法 。 

(3) 浏览 器 加 载 视频 时 会 触发 loadstart 事件 并 调用 JavaScript 脚本 中 的 LoadStartO 函 
数 。 具 体 代 码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


function LoadStart () 


{ 
document .getElementById('state') .innerHTML=" 开 始 加 载 视频 "; 


loadstart 事件 是 浏览 器 开始 请 求 媒介 时 运行 脚本 。 当 视频 加 载 还 没 播放 时 通过 
“document.getElementById('state'”))” 中 的 state 找到 页 面 中 的 div， 当 前 状态 后 面 便 显 示 “ 开 
始 加 载 视 频 ”。 

(4) 视频 加 载 后 便 会 正常 播放 ，play 事件 表示 媒介 数据 即将 开始 播放 时 运行 脚本 ， 
playing 事件 表明 媒体 已 经 开始 播放 ，pause 事件 表示 媒介 数据 暂停 播放 时 运行 脚本 。 这 些 


事件 在 触发 的 时 候 将 它们 的 状态 值 更 改 ， 调 用 对 应 的 方法 即 可 。 有 具体 代码 如 下 所 示 ; 
function video Play() 
{ 
document .getElementById('state') .innerHTML=" 当 前 状态 : 即将 播放 视频 "; 
. 
function video playing() 
{ 
document .getElementById('state') .innerHTML=" 当 前 状态 : 正在 播放 视频 "; 
} 
function video pause() 
{ 
document .getElementById('state') .innerHTML=" 当 前 状态 : 暂停 视频 "; 
} 
单 击 【 播 放 】 按 钮 会 触发 playing 事件 ， 当 前 状态 后 面 便 是 “正在 播放 视频 ”。 单 击 【 暂 


停 】 按 钮 会 触发 pause 事件 ， 当 前 状态 后 面 便 是 “暂停 视频 ”。 具 体 效 果 如 图 4-11 和 图 4-12 
所 示 。 


图 4-11 playing 事件 效果 图 图 4-12 pause 事件 效果 图 


(5) 改变 视频 播放 的 音量 或 者 将 视频 设置 为 静音 时 ， 要 用 到 volumechange 事件 ， 调 用 
JavaScript 脚本 中 的 video_volumechange0) 函 数 。 具 体 代码 如 下 所 示 : 


function video volumechange () 


{ 


(6) 浏览 器 加 载 视频 出 现 错误 时 就 会 触发 error 事件 ， 调 用 JavaScript 脚本 中 的 
video_error0 函 数 。 具 体 代码 如 下 所 示 : 


error 属性 返回 了 一 个 MediaError 对 象 ， 使 用 该 对 象 的 “code” 返 回 当前 的 错误 值 。 此 
属性 只 能 读 取 ， 是 不 可 以 更 改 的 。MediaError 对 象 中 的 “code” 对 应 的 返回 值 只 有 4 个 ， 
它们 分 别 是 1、2、3、4。 本 案例 中 的 6 个 事件 已 经 介绍 完了 。 但 是 要 想 达 到 制作 出 的 网 页 
视频 播放 器 效果 还 远 远 不 够 ， 下 面 主要 介绍 这 个 案例 中 使 用 的 属性 及 方法 。 

(7) 当 视 频 播放 时 单 击 【播放 】【 和 暂停 】 或 【重新 播放 】 按 钮 便 会 实现 视频 的 播放 、 
暂停 和 重新 播放 。 有 具体 代码 如 下 所 示 : 


上 述 代码 中 paused 属性 是 判断 视频 是 否 处 于 暂停 状态 。 在 play0 和 pauseO 中 分 别 用 了 
让 条 件 判断 句 ， 如 果 视 频 是 播放 状态 则 单 击 【暂停 】 按 钮 视频 暂停 ， 如 果 视 频 是 暂停 状态 
则 单 击 【 播 放 】 按 钮 视频 便 播放 。again0 中 的 load 则 表示 视频 重新 开始 播放 。 

(8) 单 击 【 快 进 】 或 【 快 退 】 按 钮 实现 视频 播放 的 快 进 或 快 退 ， 调 用 了 JavaScript 脚 
本 中 的 kuaijin0 函 数 和 kuaitui0) 函 数 。 具 体 代码 如 下 所 示 : 


这 个 功能 用 到 了 video 元 素 的 playbackrate 属性 。 当 单 击 【 快 进 】 按 钮 时 通过 myVideo 
找到 相应 播放 的 视频 ,将 此 视频 的 playbackRate 值 增加 2 来 实现 视频 的 快 进 , 单 击 【 快 退 】 
按钮 的 原理 与 单 击 【 快 进 】 按 钮 的 原理 相同 。 

(9) 单 击 【 音 量 +】 或 【音量 -】 按 钮 实现 视频 播放 时 声音 的 增 减 ， 调 用 了 JavaScript 
中 的 upO 函 数 和 down0 函 数 。 具 体 代 码 如 下 所 示 : 


音量 增 减 的 这 个 功能 使 用 了 video 元 素 的 volume 属性 ,在 up0 函 数 的 让 判断 句 中 ， 当 
volume 的 值 小 于 1 时 , 通过 myVideo 找到 相应 的 视频 并 把 这 个 视频 的 音量 增加 0.1.downO 
函数 的 原理 和 up0 函 数 是 一 样 的 。 

(10) 单 击 【 静 音 】 按 钮 实现 视频 播放 时 的 静音 功能 ， 调 用 了 JavaScript 中 的 silence() 
函数 ， 具 体 代码 如 下 所 示 : 


%4s 


基于 HTML 5 的 多 媒体 支持 


Var videol=document .getElementsByTagName ("video") [0]; 
if(videol .muted) 
{ 

Videol .muted=false; 

document .getElementById (silence) .value=" 单 击 静音 " 了 
) ® 
elsef{ 

Videol .muted=true; 


document .getElementById(silence) .value=" 取 消 静 音 " 


} 

这 个 功能 用 到 了 video 元 素 的 muted 属性 ， 当 muted 的 值 为 false 时 视频 播放 时 将 其 设 
置 为 静音 。 当 muted 的 值 为 tue 时 视频 播放 时 静音 取消 。 

(11) 制作 出 的 网 页 视频 播放 器 的 效果 如 图 4-13 所 示 。 
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图 4-13 网 页 播放 器 


玉 
在 不 同 的 浏览 器 上 加 载 视频 后 的 播放 效果 不 一 样 , 如 果 在 播放 视频 时 没有 实现 
预想 的 效果 ， 可 以 换 一 种 浏览 器 试 试 。 


4.6 习题 


一 、 填 空 题 


2. 在 下 面 的 代码 空缺 处 中 填写 一 个 video 元 素 属性 使 视频 可 以 加 载 页 面 后 自动 播放 。 


<video id="videol" src="xiong.webm" width="1000px" height="350px" 


loop="true" controls ></video> 


事件 是 媒介 数据 暂停 播放 时 的 运行 脚本 。 
事件 表明 媒体 已 经 开始 播放 。 
.HTML 5 中 支持 视频 的 播放 格式 包括 Ogg、H.264、 和 MPEG-4。 
. HTML 5 中 支持 音频 的 播放 格式 包括 MP3、WebM 音频 、AAC 和 要 


amr 


二 、 选 择 题 
1. 当前 播放 文件 是 否 结束 的 属性 是 


A. error 
B. ended 
C. paused 
D. loop 
2.audio 元 素 属 性 和 video 元 素 属性 不 同 的 一 项 是 。 
A. height 
B. playbackRate 
C. poster 
D. networkState 
3. video 元 素 中 preload 的 默认 值 是 。 
A. auto 
B. 10KB 
C. none 
D. metadata 
4. 多 媒体 元 素 开 始 播放 的 事件 是 。 
A. currentTime 
B. startTime 
C. played 
D. loop 
5. 在 HTML 5 中 的 video 元 素 的 事件 中 ，canplay 指 的 是 
A. 浏览 器 开始 请 求 媒介 时 运行 脚本 
B. 浏览 器 正在 获取 媒介 数据 时 运行 脚本 
C. 浏览 器 开始 媒介 播放 ， 但 估计 以 当前 速率 播放 不 能 直接 将 媒介 播放 完 
D. 媒介 数据 即将 开始 播放 时 运行 脚本 
6. play 事件 和 playing 事件 的 区 别 是 。 
A. 没有 任何 区 别 ， 可 以 相互 使 用 
B. 视频 循环 或 再 次 播放 开始 时 ， 会 发 送 play 事件 和 playing 事件 
C. 视频 循环 或 再 次 播放 开始 时 ， 将 不 会 发 送 play 事件 ， 但 是 会 发 送 playing 事件 
D. 视频 循环 或 再 次 播放 开始 时 ， 将 不 会 发 送 playing 事件 ， 但 是 会 发 送 play 事件 


三 、 上 机 练习 
1. video 元 素 属性 添加 视频 文件 。 
在 HIML 5 中 添加 一 个 视频 ， 视 频 加 载 时 会 自动 播放 ， 而 且 显示 播放 的 按钮 ， 如 暂停 


按钮 等 控件 。 运 行 结果 如 图 4-14 所 示 。 


4-14 在 HIML 5 中 添加 视频 


2. audio 元 素 事件 volumechange 
在 HIML 5 中 先 加 载 一 个 音频 ， 然 后 用 audio 元 素 的 volumechange 事件 来 实现 播放 音 
频 时 静音 的 效果 。 运 行 结果 如 图 4-15 所 示 。 


后 CD Eile:///P:/ 工 作 视 纲 /上 机 2,htal 


ps 


4-15 将 音频 文件 设置 为 静音 


4.7 实践 疑难 解答 


4.7.1 关于 video 元 素 方法 的 问题 


关于 video 元 素 方法 的 问题 
网 络 课堂 : http:/bbs.itzcn.comythread-19718-1-1.html 

【问题 描述 】: 我 刚 学 习 了 HTML 5 中 插入 视频 的 课程 ， 要 想 在 视频 上 插入 两 个 按钮 来 
实现 视频 的 暂停 和 播放 ， 如 何 用 video 元 素 的 方法 实现 啊 ? 

【解决 办 法 】: 首先 我 们 要 知道 在 HIML 5 中 video 元 素 的 方法 有 哪些 .常见 的 3 个 video 
元 素 方 法 分 别 是 play0、pause0 和 load0， 它 们 的 作用 分 别 是 播放 视频 、 和 暂停 视频 和 重新 载 
入 视频 。 下 面 就 在 Dreamweaver CS5 中 新 建 一 个 页 面 并 插入 一 个 视频 ， 用 play0 方 法 和 


pause( 方 法 来 实现 视频 的 播放 和 暂停 。 代 码 如 下 所 示 : 


当 单 击 [播放 /暂停 按钮 时 触发 了 onclick 事件 ,在 JavaScript 脚本 中 调用 了 playorStopO 
函数 。 函 数 playorStopO 中 的 站 判断 句 给 我 们 展示 了 如 果 视 频 是 暂停 状态 调用 的 是 play0 方 
法 ， 当 视频 处 于 播放 状态 时 便 会 调用 pause0 方 法 。 


4.7.2 video 元 素 的 事件 问题 


| 面 员 ”关于 video 元 素 的 事件 问题 


39 网 络 课堂 :http://bbs.itzcn.com/thread-19719-1-1.html 

【问题 描述 】 我 在 HIML 5 中 插入 一 个 视频 并 且 用 了 一 个 loadedmetadata 事件 想 要 在 
视频 下 面 显 示 播 放 的 时 间 ， 可 是 不 管 怎么 试 都 不 能 成 功 ， 该 怎么 办 呢 ? 

【解决 办 法 】 这 位 同学 用 的 video 元 素 事 件 是 错误 的 。 媒 介 改 变 其 播放 位 置 时 会 触发 
video 元 素 的 timeupdate 事件 。 下 面 我 们 在 JavaScript 脚本 中 用 一 个 updateTime0 函 数 来 显 
示 视 频 播放 时 间 。 具 体 代 码 如 下 所 示 : 


基于 HTML 5 的 绘图 


re 


前 几 章 已 经 对 HIML 5 中 新 增加 的 基本 元 素 、 全 局 属性 以 及 表单 的 属性 和 类 型 等 知识 
进行 了 详细 的 介绍 ， 本 章 将 介绍 HTML 5 中 的 另 一 个 元 素 一 一 canvas 及 伴随 着 该 元 素 的 一 
套 编程 接口 canvas API。canvas 元 素 的 出 现 是 HTML 5 的 最 大 特色 之 一 ， 使 用 该 元 素 
可 以 绘制 任意 的 图 像 ， 制 作出 更 加 丰富 多 彩 、 赏 心 悦 目 的 页 面 。 

通过 本 章 的 学 习 ， 读 者 可 以 熟练 掌握 并 使 用 HIML 5 中 的 canvas 元 素 ， 还 能 够 使 用 该 
元 素 及 API 接口 与 JavaScript 脚本 相 结合 绘制 简单 的 图 像 ， 并 且 对 这 些 图 像 和 图 形 进行 多 
种 操作 等 。 

本 章 学 习 要 点 : 

> 了 解 canvas 元 素 的 发 展 历史 
了 解 canvas 与 SVG 及 VML 的 差异 
掌握 如 何 绘制 文字 
掌握 如 何 绘制 矩形 
掌握 如 何 绘制 路 径 
掌握 如 何 绘制 纯 属 渐变 和 径 向 渐变 
熟悉 图 形 的 保存 和 恢复 
熟悉 如 何 调用 函数 输出 图 形 图 像 
掌握 坐标 变换 和 和 矩形 变换 的 相关 函数 
熟悉 如 何 组 合 多 个 图 形 
掌握 如 何 使 用 相关 属性 为 图 形 、 图 像 或 文字 等 实现 阴影 效果 
掌握 如 何 对 图 像 进行 基本 操作 
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5.1 canvas 简介 


canvas 元 素 是 HTML 5 中 新 增加 的 一 个 元 素 ， 它 专门 用 来 绘制 图 像 、 图 形 、 文 字 及 动 
画 等 。 该 元 素 通过 与 自 带 的 API 结合 JavaScript 代码 可 以 在 整个 画布 上 面 绘制 各 类 图 形 和 
图 像 以 及 动画 。 一 个 canvas 元 素 就 像 是 一 块 画 布 ， 画 布 是 一 个 巨型 区 域 ， 读 者 可 以 控制 画 
布 上 的 每 一 个 像素 。 本 节 将 介绍 canvas 元 素 的 相关 知识 ， 包 括 它 的 历史 、 与 SVG 和 VML 
的 差异 以 及 基本 使 用 等 内 容 。 


5.1.1 canvas 的 历史 


canvas 元 素 是 为 了 客户 端 撩 量 图 形 而 设计 的 ， 它 本 身 不 具有 任何 行为 ， 但 是 却 把 一 个 
绘图 API 展现 给 客户 端 JavaScript， 以 使 脚本 能 够 把 想 绘制 的 东西 都 绘制 到 一 块 画布 上 。 

该 元 素 最 早 是 由 Apple 在 Safari 1.3 浏览 器 中 引入 ， 它 出 现 的 根本 原因 在 于 : HTML 
在 Safari 浏览 器 中 的 绘图 能 力也 被 Mac OS X 桌面 的 Dashboard 组 件 所 使 用 ， 并 且 Apple 
希望 有 一 种 方式 在 Dashboard 中 支持 脚本 化 的 图 形 。 

一 个 Web 浏览 器 厂商 的 非 正式 协会 在 为 推进 canvas 元 素 的 标准 化 做 出 努力 ， 目 前 该 
元 素 已 经 成 为 HTML 5 中 一 个 正式 标签 。 另 外 许多 主流 的 浏览 器 (如 Google、Firefox、Opera 
和 Safari 等 ) 都 提供 了 对 该 元 素 的 支持 。 


5.1.2 canvas 与 SVG 及 VML 的 差异 


SVG (Scalable Vector Graphics) 被 称 作 可 缩放 矢量 图 形 ， 它 是 描述 二 维 矢量 图 形 的 一 
种 图 形 格式 。 

VML 是 一 种 3D 光学 影像 测量 仪 , 它 采 用 3DFAMILY-L 型 连续 变 倍 高 级 镜头 ， 影 像 可 
实现 28 一 180 的 连续 变 倍 。VML 装 有 激光 指示 器 能 够 精确 指示 当前 测量 位 置 ，Z 轴 装 有 光 
栅 尺 ， 可 对 影像 测量 高 度 ， 同 时 可 选 配 英国 知名 品牌 的 高 性 能 接触 式 测 头 ， 并 配送 21 和 
22 探 针 ， 结 合 软件 做 精确 的 高 度 测量 。 

canvas 元 素 和 SVG 以 及 VML 之 间 最 大 的 不 同 在 于 : canvas 元 素 有 一 个 基于 JavaScript 
脚本 绘图 的 API， 而 SVG 和 VML 都 是 使 用 一 个 XML 文档 来 描述 绘图 。 这 两 种 方式 在 功 
能 上 是 等 同 的 ， 任 何 一 种 都 可 以 用 另 一 种 来 模拟 。 但 是 它们 每 一 种 都 有 强项 和 弱点 ， 例 如 
SVG 绘图 时 很 容易 编辑 ， 只 要 从 其 描述 中 移 除 元 素 就 可 以 了 ; 而 如 果 从 同一 图 形 的 canvas 
中 移 除 元 素 ， 往 往 需 要 擦 掉 绘图 重新 绘制 。 


5.1.3 ”canvas 的 简单 使 用 


在 HTML 页 面 中 插入 canvas 元 素 是 非常 直观 和 简单 的 ,如 下 代码 演示 了 如 何在 HIML 
页 面 中 显示 出 一 块 200X200 的 隐藏 区域。 如 果 想 要 显示 边框 ， 可 以 通过 标准 的 CSS 属性 
来 设置 。 具 体 代 码 如 下 所 示 : 


大 多 数 canvas 绘图 API 都 没有 作用 在 canvas 元 素 本 身上 ， 而 是 定义 在 通过 画布 的 
getContext() 方 法 获得 的 一 个 绘图 环境 对 象 上 。 

canvas API 也 使 用 了 路 径 的 表示 法 ， 但 是 路 径 由 一 系列 的 方法 调用 来 定义 ， 而 不 是 描 
述 为 字母 和 数字 的 字符 串 ， 比 如 调用 beginPathO0 和 arc0 方 法 。 一 旦 定义 了 路 径 ， 其 他 的 方 
法 (如 fl0) 都 是 对 此 路 径 进行 操作 。 然 后 通过 绘图 环境 的 各 种 属性 (如 fillStyle) 说 明 


这 些 操 作 如 何 使 用 。 

【实践 案例 5-1】 

在 Dreamweaver CS5 中 添加 新 的 HTML 页面 ， 在 页 面 的 合适 位 置 添加 输入 框 和 按钮 ， 
它们 分 别 用 来 输入 颜色 的 行 、 列 以 及 要 执行 的 操作 。 页 面具 体 代码 如 下 所 示 : 


单 击 【 创 建 】 按 钮 时 触发 该 按钮 的 onclick 事件 ， 在 该 事件 中 调用 showO 函 数 ， 该 函数 
的 具体 代码 如 下 所 示 : 


第 吕 间 


基于 HTML 5 的 绘图 


上 述 代 码 中 首先 获取 用 户 输入 的 行 和 列 ， 并 分 别 保存 到 变量 hang 和 lie 中 ， 接 着 根据 
document 对 象 的 getElementById0 方 法 获取 canvas 元 素 对 象 . 然 后 根据 该 对 象 的 getContext 
属性 检查 浏览 器 是 否 支 持 canvas 元 素 ， 如 果 支 持 则 调用 getContext0 方 法 并 传 入 参数 2d 获 
取 一 个 二 维 上 下 文 对 象 。 然 后 通过 两 个 for 循环 语句 创建 方 格 阵列 ， 在 内 层 的 for 语句 中 
fillStyle 属性 用 于 设置 填充 的 颜色 ，filRect() 方 法 填充 指定 的 矩形 。 

运行 上 段 代 码 ， 页 面 的 最 终 运行 效果 如 图 5-1 所 示 。 M39) 
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图 5-1 canvas 元 素 的 基本 应 用 


5.2 ”绘制 文字 


cancas 元 素 的 出 现 是 HTML 5 的 新 特性 之 一 , HTML 5 可 以 通过 该 元 素 进行 文字 绘制 ， 
也 可 以 对 绘制 的 文字 指定 大 小 、 对 齐 方 式 以 及 字体 等 , 还 可 以 进行 文字 的 纹理 填充 等 操作 。 

绘制 文字 时 可 以 调用 两 个 函数 : filText0 和 trokeTextO。fillTextO 函 数 是 以 填充 的 方式 
绘制 文字 ，strokeText0 函 数 是 以 描 边 的 方式 绘制 文字 。 它 们 的 语法 形式 如 下 所 示 : 

context .fillText (text,x,y[,maxwidth]); 

context .strokeText (text, x,y[,maxwidth]); 


上 述 语法 中 fillText0 函 数 和 trokeText0 函 数 中 的 参数 完全 相同 ， 它 们 接受 4 个 参数 。 
第 一 个 参数 表示 绘制 文字 的 文本 ; 第 二 个 参数 表示 绘制 文字 的 起 点 横 坐 标 ， 第 三 个 参数 表 
示 绘 制 文字 的 起 点 纵 坐 标 ， 第 四 个 参数 是 可 选 参数 ， 用 于 限制 文字 大 小 ， 它 会 将 文本 字体 
强制 收缩 到 指定 尺寸 。 
为 了 保证 文本 在 各 个 浏览 器 都 能 正常 显示 ， 在 使 用 canvas API 进行 文字 绘制 之 前 首先 
要 对 文字 的 相关 属性 进行 设置 。 这 些 属性 及 具体 说 明 如 下 所 示 。 
口 font 设置 文字 字体 。 
口 textAlign 控件 文字 的 对 齐 方式 ， 它 类 似 于 CSS 中 的 text-align 属性 , 但 是 不 完全 
相同 。 它 的 取 值 有 start ( 默认 值 )、end、left、right 和 center。 
口 textBaseline 设置 文字 相对 于 起 点 的 位 置 ， 它 的 取 值 包括 top、hanging、middle、 
alphabetic、ideographic ( 默认 值 ) 和 bottom 。 


下 面 通 过 一 个 简单 的 示例 演示 如 何 使 用 canvas API 在 画布 上 绘制 文字 。 

【实践 案例 5-2】 

使 用 canvas API 实现 绘制 文字 效果 的 具体 步骤 如 下 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 和 p 元 素 ， 它 们 分 别 
显示 绘制 的 文字 和 具体 内 容 信息 。 页 面 的 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 直接 调用 JavaScript 脚本 中 的 AddTextContext0 函 数 显 示 绘制 的 文字 ， 
该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 首先 根据 getElementId0 方 法 获取 canvas 元 素 ， 然 后 判断 浏览 器 是 否 支持 该 
元 素 。 如 果 支 持 则 调用 getContext() 方 法 获取 上 下 文 对 象 ， 然 后 分 别 设置 该 对 象 的 fillStyle 
属性 、font 属性 和 textBaseline 属性 等 。 最 后 分 别 调用 flTextO 函 数 和 strokeTextO 函 数 显示 
文字 ， 全 部 完成 后 调用 addEventListener() 执 行 该 函数 。 

(3) 运行 上 述 代码 进行 测试 ， 页 面 的 最 终 运 行 效果 如 图 5-2 所 示 。 


图 5-2 ”canvas 元 素 绘制 文字 


5.3 ”绘制 简单 图 形 


使 用 canvas API 除了 可 以 在 canvas 元 素 上 绘制 文字 外 ,还 可 以 绘制 简单 的 图 形 (如 算 
形 、 直 线 和 圆 形 等 )， 下 面 将 详细 介绍 如 何 使 用 canvas API 在 画布 上 绘制 简单 的 图 形 。 


5.3.1 绘制 矩形 


HTML 5 中 实现 绘制 矩形 的 效果 可 以 调用 上 下 文 对 象 的 3 个 函数 : fillRectO、strokeRect() 
和 clearRect0。 这 些 函 数 的 语法 形式 如 下 所 示 ; 


上 述 语法 中 每 个 函数 都 包含 4 个 相同 的 参数 ， 第 一 个 参数 表示 矩形 起 点 的 横 坐 标 ; 第 
二 个 参数 表示 算 形 起 点 的 纵 坐 标 ， 第 三 个 参数 表示 和 矩形 的 宽度 ， 第 四 个 参数 表示 算 形 的 高 
度 ; 坐标 原点 为 canvas 画布 的 最 左上 角 。 

绘制 矩形 时 需要 结合 两 个 常用 的 属性 : fnlStyle 和 strokeStyle。fillStyle 表示 填充 的 样 
式 ， 在 该 属性 中 可 以 设置 填充 的 颜色 值 ，strokeStyle 表示 图 形 边框 的 样式 ， 在 该 属性 中 可 
以 设置 边框 的 颜色 值 。 另 外 这 两 个 属性 除了 可 以 设置 CSS 颜色 外 ,还 可 以 分 别 是 图 案 和 颜 
色 渐 变 。 

【实践 案例 5-3】 

本 示例 详细 介绍 如 何在 canvas 画布 中 绘制 不 同 长 度 和 宽度 的 带 边 框 的 矩形 , 实现 该 功 
能 的 具体 步骤 如 下 : 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 canvas 元 素 ， 它 们 分 别 用 来 
绘制 不 同 长 度 和 宽度 的 矩形 。 页 面 的 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 自动 加 载 Load 事件 并 显示 出 所 有 绘制 的 矩形 ，JavaScript 中 的 具体 代 
虽 码 如 下 所 示 : 
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基于 HTML 5 的 绘图 


context .strokeRect (30, 30,100, 200); / /绘制 外 部 矩形 
} 


window.addEventListener ("load",AddJuxing]l,true); 
window.addEventListener ("load",AddJuxing2,true); 


window.addEventListener ("load",AddJuxing3,true); 
</script> 


上 述 代 码 中 创建 了 3 个 函数 , AddJuxing10 函 数 用 于 向 页 面 ID 为 addJul 的 画布 中 创建 

-个 长 度 为 200、 宽 度 为 100 的 和 矩形; AddJuxing20 函 数 用 于 向 页 面 ID 为 addJu2 的 画布 中 

创建 长 度 和 宽度 均等 于 200 的 矩形 ( 即 正 方形 ); AddJuxing30 函 数 用 于 向 页 面 ID 为 addJu3 

的 画布 中 创建 长 度 为 00、 宽 度 为 200 的 矩形 。 并 且 在 不 同 的 函数 中 分 别 设置 fillStyle 和 

strokeStyle 的 相关 属性 ， 然 后 通过 lineWidth 属性 指定 外 部 矩形 的 边框 宽度 ， 全 部 完成 后 在 
addEventListener() 中 通过 指定 事件 执行 相应 的 函数 。 


(C3) 


5.352 


| 


运行 本 示例 的 代码 ， 最 终 运行 效果 如 图 5-3 所 示 。 


图 5-3 ”绘制 矩形 的 运行 效果 


绘制 直线 


- 节 已 经 介绍 过 如 何 绘制 矩形 ， 本 节 及 后 面 两 节 将 详细 介绍 如 何 绘制 矩形 以 外 的 图 


形 〈 如 圆 形 )。 
想 要 绘制 其 他 图 形 则 需要 使 用 路 径 ， 同 绘制 矩形 一 样 ， 绘 制 开始 时 仍然 需要 获取 图 形 


上 下 光 。 


口 
口 


口 


口 


绘制 其 他 图 形 时 常用 的 函数 如 下 所 示 。 

beginPathO ”开始 创 人 

moveTo(x，y) 不 绘制 ， 只 是 将 当前 位 置 移动 到 新 目标 坐标 ， 并 且 作 为 线条 开 
始点 。 

lineTo(x，y) 绘制 线条 到 指定 的 目标 坐标 (xX，y)， 且 在 两 个 坐标 之 间 画 一 条 
直线 。 

stroke0 绘制 图 形 的 边框 。 

fil0 填充 一 个 实心 图 形 ， 当 调用 该 方法 时 开放 的 路 径 会 自动 闭合 ， 而 无 须 调用 
closePahtO 函 数 。 


口 closePathO 关闭 路 径 。 

使 用 上 面 的 函数 绘制 图 形 时 首先 使 用 路 径 勾勒 图 形 轮廓 ， 然 后 设置 颜色 进行 绘制 。 其 
具体 步骤 如 下 所 示 。 

(1) 调用 beginPathO 函 数 创建 路 径 。 

(2) 创建 图 形 的 路 径 。 

(3) 调用 closePath0 函 数 关闭 路 径 ， 这 一 步 不 是 必须 的 。 

(4) 设 定 绘制 样式 ， 然 后 调用 stroke0 或 fl10 函 数 绘制 路 径 。 

【实践 案例 5-4】 

下 面 通过 一 个 简单 的 示例 演示 如 何 使 用 上 面 的 函数 绘制 直线 。 两 点 确定 一 条 直线 ， 要 
在 网 页 中 绘制 一 条 直线 就 需要 确定 直线 的 起 始 坐 标 和 终点 坐标 。 本 案例 使 用 路 径 的 相关 函 
数 实现 绘制 不 同 直 线 的 功能 ， 实 现 该 功能 的 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 canvas 元 素 ， 它 们 分 别 用 于 
绘制 不 同 的 直线 。 页 面 的 具体 内 容 如 下 所 示 : 


(2) 页 面 加 载 时 根据 window 对 象 的 addEventListenerO 函 数 调用 不 同 的 函数 显示 图 形 ， 
JavaScript 脚本 中 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 中 AddZhi10 函 数 通过 lineWidth 属性 指定 直线 的 宽度 ， moveTo0 函 数 指定 绘 
制 直线 的 起 始 坐 标 ，lineTo0 函 数 指定 目标 坐标 ， 最 后 通过 strokeO 函 数 绘制 直线 路 径 。 
AddZhi20 函 数 通过 两 个 lneTo0 函 数 从 同一 个 点 出 发 绘制 两 条 直线 ; AddZhi30 函 数 中 最 后 
调用 fl10 函 数 绘制 两 条 直线 ， 该 函数 会 自动 填充 实心 图 形 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 效 果 如 图 5-4 所 示 。 
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图 5-4 ”绘制 直线 的 运行 效果 


5.3.3 绘制 三 角形 


上 节 已 经 介绍 了 如 何 使 用 canvas API 绘制 不 同 的 直线 ， 本 节 主 要 使 用 上 下 文 对 象 的 相 
关 函 数 绘 制 不 同 的 三 角形 。 


【实践 案例 5-5】 

本 案例 继续 使 用 上 一 节 介绍 的 函数 实现 绘制 不 同 的 三 角形 的 功能 ， 实 现 该 功能 的 具体 
步骤 如 下 所 示 。 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 canvas 元 素 ， 它 们 分 别 用 于 
显示 绘制 的 不 同 三 角形 。 页 面 的 具体 代码 如 下 所 示 。 


(2) 页 面 加载 时 分 别 调用 AddSanJiao10、AddSanJiao20 和 AddSanJiao30 这 3 个 函数 
绘制 不 同 填充 形状 的 三 角形 。JavaScript 脚本 中 函数 的 主要 代码 如 下 所 示 : 


5-5 绘制 三 角形 的 运行 效果 


5.3.4 ”绘制 圆 形 


使 用 canvas API 中 上 下 文 对 象 的 函数 除了 可 以 绘制 直线 、 和 矩形 和 三 角形 外 ， 还 可 以 绘 
制 圆 形 。 绘 制 圆 形 时 需要 调用 arc0 函 数 ， 该 函数 的 语法 形式 如 下 所 示 : 
«context.arc(x,y,radius,startAngle,endAngle,anticlockwise); | 

上 述 代 码 中 arc0 函 数 主 要 包含 6 个 参数 ,前 两 个 参数 x 和 y 分 别 表示 绘制 圆 形 的 起 点 
横 坐 标 和 起 点 纵 坐 标 ; radius 表示 绘制 的 圆 形 半径 ; startAngle 表示 开始 角度 ; endAngle 表 
示 结 束 角 度 ; anticlockwise 表示 是 否 按照 顺 时 针 方向 进行 绘制 。 

在 canvas 元 素 的 API 中 绘制 半径 与 弧 时 所 指定 的 参数 为 开始 弧度 与 结束 弧度 , 如 果 习 
惯 使 用 角度 ， 可 以 使 用 下 面 的 方法 将 弧度 转换 为 角度 : 


上 述 方法 中 Math.PI 表示 角度 为 180”，Math.PI*2 表示 角度 为 360”。 


arc() 函 数 不 仅 可 以 绘制 圆 形 ， 也 可 以 用 来 绘制 圆 弧 。 使 用 时 必须 指定 开始 角度 
与 结束 角度 , 这 两 个 参数 决定 了 弧度 . anticlockwise 参数 为 一 个 布尔 值 的 参数 ， 
当 参 数值 为 true 时 表示 按照 顺 时 针 方向 绘制 ， 否 则 为 逆 时 针 方 向 绘制 。 


【实践 案例 5-6】 


本 案例 中 主要 使 用 canvas 元 素 及 API 中 的 常用 内 置 函 数 实现 圆 形 和 弧度 的 简单 绘制 ， 
实现 该 功能 的 具体 步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 4 个 canvas 元 素 ， 它 们 分 别 用 来 
显示 不 同 的 圆 形 和 弧度 。 页 面 的 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 通过 window 对 象 的 addEventListener() 执 行 不 同 的 函数 ，JavaScript 中 
的 具体 代码 如 下 所 示 : 


上 述 代码 首先 创建 GetContext0 函 数 ， 该 函数 主要 用 来 创建 上 下 文 对 象 context。 然 后 
分 别 通过 3 个 函数 创建 不 同和 圆 形 和 弧度 ， 其 中 Add40 函 数 通过 context 对 象 中 的 
strokeStyle 设置 圆 形 边框 的 颜色 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 效果 如 图 5-6 所 示 。 


5-6 绘制 圆 形 的 运行 效果 


5.3.5 ”绘制 笑脸 


前 面 几 节 已 经 详细 介绍 了 如 何 使 用 canvas 元 素 在 HIML 5 页 面 中 绘制 简单 的 图 形 , 如 
直线 、 和 矩形 和 圆 形 等 。 本 节 将 前 面 几 节 的 内 容 结 合 起 来 ， 实 现 绘制 简单 笑脸 的 功能 。 

【实践 案例 5-7】 

实现 绘制 笑脸 功能 的 具体 步骤 如 下 : 

(1) 添加 新 的 HTML 页面 ， 在 页 面 的 合适 位 置 添 加 canvas 元 素 和 p 元 素 ， 它 们 分 别 
绘制 笑脸 和 显示 内 容 。 页 面 的 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 触发 load 事件 调用 Smail0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 beginPath0 函 数 开始 创建 绘制 笑脸 的 路 径 ， 接 着 调用 arcO 函 数 分 别 
绘制 笑脸 的 圆 脸 、 嘴 巴 、 左 眼 和 右 眼 等 内 容 。 然 后 再 通过 beginPath0) 函 数 创建 开始 路 径 ， 
通过 strokeStyle 属性 指定 笑脸 中 直线 的 颜色 ，moveTo0 函 数 指定 绘制 的 起 始 位 置 ，lineTo0 
函数 指向 目标 位 置 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 效果 如 图 5-7 所 示 。 
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图 5-7 绘制 笑脸 运行 效果 


5.4 ”绘制 渐变 图 形 


HTML 4 以 及 之 前 的 版 本 中 如 果 要 实现 不 同色 彩 的 图 形 需要 借助 第 三 方 的 力量 ， 但 是 
HTML 5 中 的 渐变 技术 很 好 地 解决 了 这 个 问题 。 渐 变 是 指 在 填充 时 从 一 种 颜色 慢 慢 过 滤 到 
另外 一 种 颜色 ,在 HIML 5 中 canvas 的 绘图 上 下 文 对 象 支持 两 种 类 型 : 线性 渐变 和 径 向 渐 
变 。 本 节 将 详细 介绍 如 何在 HIML 5 中 绘制 线性 渐变 和 径 向 渐变 。 


5.4.1 绘制 线性 渐变 


绘制 线性 渐变 时 需要 使 用 LinearGradient 对 象 ， 如 果 要 得 到 该 对 象 可 以 直接 通过 上 下 
文 对 象 的 createLinearGradient0) 函 数 来 创建 。 该 函数 的 语法 形式 如 下 所 示 : 


上 述 语 法 中 createLinearGradient0) 函 数 有 4 个 参数 ，xStart 表示 渐变 起 始点 的 横 坐 标 ; 
yStart 表示 渐变 起 始点 的 纵 坐标 ; xEnd 表示 渐变 结束 点 的 横 坐 标 ; yEnd 表示 渐变 结束 点 的 
纵 坐 标 。 

LinearGradient 对 象 创建 完 成 后 如 何 设置 渐变 颜色 呢 ? 调用 该 对 象 的 addColorStopO 函 
数 即 可 。 该 函数 的 语法 形式 如 下 所 示 : 


addColorStop0 函 数 可 以 追加 颜色 的 渐变 , 该 函数 中 包含 两 个 参数 : offset 和 color。 offset 
表示 所 设 定 的 颜色 离开 渐变 起 始点 的 偏 移 量 ， 它 的 值 范围 在 0 一 1 之 间 ，0 为 渐变 起 始点 的 
偏 移 量 ，1 为 渐变 结束 点 的 偏 移 量 ; color 参数 必须 是 一 个 有 效 的 CSS 颜色 值 (如 手 FF 和 
rgba(0,0,0,1) 等 )。 

渐变 在 颜色 集 上 使 用 逐步 抽样 算法 ， 并 且 将 结果 应 用 到 描 边 样式 和 填充 样式 中 。 绘 制 
渐变 时 需要 3 个 步骤 ， 其 具体 说 明 如 下 所 示 。 

(1) 创建 线性 或 径 向 渐变 对 象 。 

(2) 为 渐变 对 象 设置 颜色 ， 指 明 过 渡 方式 。 

(3) 在 context (上 下 文 对 象 ) 上 为 填充 样式 或 者 描 边 样式 设置 渐变 。 

【实践 案例 5-8】 

本 案例 绘制 了 两 种 不 同 颜色 的 线性 渐变 ， 实 现 该 功能 的 主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 3 个 canvas 元 素 。 页 面具 体 代码 
如 下 所 示 : 


(2) 页 面 加 载 时 触发 Load 事件 , 分 别 调用 draw0 函 数 、drawTitle() 函 数 和 drawContentO) 
函数 ，draw0 函 数 主要 用 来 绘制 线性 渐变 ， 其 具体 代码 如 下 所 示 : 


上 述 代码 调用 GetContext0 函 数 获取 上 下 文 对 象 ， 该 函数 的 具体 内 容 不 再 显示 。 接 着 
分 别 调用 ctx 对 象 的 createLinearGradient0 函 数 创建 两 个 LinearGradient 对 象 lingrad 和 
lingrad2， 分 别 调用 addColorStop0 函 数 设置 渐变 的 颜色 。 最 后 调用 flIRectO 函 数 和 
strokeRect() 函 数 绘 制 不 同 的 矩形 。 

(3) drawTitle0 函 数 通 过 font 属性 和 strokeText0 函 数 绘制 标题 文本 ; drawContent0) 函 


数 通 过 font 属性 和 filTextO 函 数 绘制 文本 内 容 。 它 们 的 具体 代码 如 下 所 示 : 


(4) 运行 本 示例 的 代码 进行 测试 ， 最 终 效 果 如 图 5-8 所 示 。 
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5-8 线性 渐变 的 运行 效果 


5.4.2 ”绘制 径 向 渐变 


与 线性 渐变 相对 的 是 径 向 渐变 ， 径 向 渐变 是 指 以 圆心 沿 着 圆 形 的 半径 方向 向 外 进行 扩 
散 的 渐变 方式 ， 如 绘制 太阳 时 沿 着 太阳 的 半径 方向 向 外 扩散 出 去 的 光 晕 就 是 径 向 渐变 。 

绘制 径 向 渐变 时 需要 通过 上 下 文 对 象 的 createRadialGradientO 函数 先 创 建 
RadialGradient 对 象 ， 该 函数 的 语法 形式 如 下 : 


上 述 语法 中 包含 6 个 参数 ，xStart 参数 和 yStart 参数 分 别 表 示 渐 变 开始 时 圆 的 圆心 横 
坐标 和 纵 坐 标 ; radiusStart 参数 表示 开始 圆 的 半径 ，xEnd 参数 和 yEnd 参数 分 别 表 示 渐 变 
结束 时 圆心 的 横 坐 标 和 纵 坐 标 ， radiusEnd 参数 表示 结束 圆 的 半径 。 

径 向 渐变 设 定 颜色 时 与 线性 渐变 相同 ， 需 要 使 用 RadialGradient 对 象 的 addColorStopO 
函数 进行 设 定 ， 同 样 需 要 设 定 0 一 1 之 间 的 浮 点 数 作为 渐变 转折 点 的 偏 移 量 。 


【实践 案例 5-9】 

本 案例 使 用 上 下 文 对 象 的 createRadialGradient0 函 数 、fillStyle 属性 、arc0 函 数 及 
RadialGradient 对 象 的 addColorStop0 函 数 等 实现 绘制 径 向 渐变 的 效果 。 实 现 该 功能 的 具体 
步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 中 添加 canvas 元 素 用 于 显示 渐变 图 形 。 页 面具 体 
代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 draw0 函 数 ， 该 函数 会 实现 绘制 径 向 渐变 的 效果 。 具 体 代码 如 下 
所 示 : 


上 述 代 码 首先 通过 context 对 象 的 createRadialGradient() 函 数 创建 两 个 RadialGradient 
对 象 , 然后 分 别 调用 该 对 象 的 addColorStop0 函 数 设 置 渐变 颜色 ,在 82 对 象 中 addColorStop0 


函数 指定 渐变 颜色 时 ，0.3、0.5 和 0.8 分 别 表示 其 透明 度 。for 语句 用 于 循环 绘制 圆 形 ， 在 
该 语句 中 beginPath() 函 数 创建 开始 的 路 径 ，fillstyle 的 属性 值 设置 为 g2 对 象 ，arc(O) 函 数 绘 
制 圆 形 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 效 果 如 图 5-9 所 示 。 
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5-9 绘制 径 向 渐变 的 效果 


s.5 绘制 变形 图 形 


用 户 在 绘制 图 形 时 常常 需要 对 图 形 进行 操作 ， 如 平移 图 形 、 缩 放 图 形 、 扩 大 图 形 及 旋 
转 图 形 等 ，HIML 5 中 也 提供 了 对 图 形 的 变换 处 理 功能 (如 变换 坐标 和 变换 矩阵 )， 本 节 将 
详细 介绍 如 何在 HIML 5 中 绘制 变形 图 形 。 


5.5.1 保存 和 恢复 状态 及 输出 图 像 


在 了 解 变形 之 前 先 介绍 两 个 开始 绘制 复杂 的 图 形 必 不 可 少 的 函数 : save0 和 restore0， 
然后 介绍 输出 图 像 时 的 常用 函数 ttDataUrlO。 


save() 函 数 和 restore0) 函 数 都 是 用 来 保存 和 恢复 绘画 状态 的 ， 不 需要 传递 任何 的 参数 ， 
绘画 状态 就 是 指 前 文 所 讲 的 坐标 原点 、 变 形 时 的 变化 和 矩阵、 以 及 上 下 文 对 象 的 当前 属性 值 
等 内 容 。 
保存 与 恢复 当前 状态 时 首先 调用 save0 函 数 将 当前 状态 保存 到 栈 中 ， 在 完成 设置 的 操 
作 后 再 调用 restore0 函 数 从 栈 中 取出 之 前 保存 的 图 形 上 下 文 的 状态 进行 恢复 ， 通 过 这 种 方 
法 可 以 对 之 后 绘制 的 图 像 取 消 裁剪 区 域 。 
保存 与 恢复 状态 可 用 到 以 下 区 域 。 
口 当前 应 用 的 变形 ， 即 移动 、 旋 转 和 缩放 等 。 
口 图 像 裁剪。 
口 ”改变 图 形 上 下 文 的 以 下 属性 值 时 : strokeStyle、fillStyle、globalAlpha、lineWidth、 
lineCap、 lineJoin、 miterLimit、shadowOffsetX、shadowOffsetY、 shadowBlur、 
shadowColor、globalCompositeOperation. 


【实践 案例 5-10】 

本 案例 使 用 saveO0 函 数 和 restore0) 函 数 绘制 连续 矩形 的 功能 。 实现 该 功能 的 具体 步骤 如 
下 所 示 。 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 新 的 canvas 元 素 。 具 体 代 码 如 下 
所 示 : 


(2) 页 面 加 载 时 调用 JavaScript 中 的 draw0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 中 首先 绘制 一 个 填充 颜色 为 粉红 色 的 四 方形 ， 然 后 保存 其 状态 ， 接 着 改变 填 
充 颜 色 后 绘制 第 二 个 小 一 点 的 蓝 色 四 方形 ， 然 后 青 保存 其 状态 ， 然 后 再 改变 填充 颜色 绘制 
更 小 一 点 的 半 透 明 的 淡 蓝 色 正 方形 。 

(3) 运行 本 案例 的 代码 查看 效果 ， 最 终 效果 如 图 5-10 所 示 。 
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图 5-10 保存 和 恢复 状态 的 运行 效果 


在 画布 上 完成 一 副 图 形 或 图 像 后 常常 需要 对 绘制 的 作品 进行 保 在 和 输出 等 ， 使 用 
canvas API 就 可 以 完成 该 功能 。 

canvas API 保存 和 输出 文件 的 原理 是 把 当前 的 绘画 状态 输出 到 一 个 dataURL 地 址 所 指 
向 的 数据 中 的 过 程 。 而 dataURL 是 指 目前 大 多 数 浏览 器 能 够 识别 的 一 种 base64 位 编码 的 
URL， 主 要 用 于 小 型 的 、 可 以 在 网 页 中 直接 嵌入 而 不 需要 外 部 文件 嵌入 的 数据 ， 如 img 元 
素 中 的 图 像 文件 等 。dataURL 的 格式 类 似 于 “data:image/png;base64, iVBORwOKGgoAAAA 
NSUhEUgAAAAoAAAAK...etc”， 它 目前 得 到 了 大 多 数 浏 览 器 的 支持 。 

保存 和 输出 图 像 时 需要 调用 toDataURLO 函 数 ， 该 函数 可 以 把 绘画 状态 输出 到 一 个 
dataURL 中 , 然后 重新 加 载 客 户 端 可 直接 把 装载 后 的 文件 进行 保存 。 其 具体 语法 如 下 所 示 : 


上 述 语法 在 toDataURL0O 函 数 中 传递 一 个 参数 type， 该 参数 表示 要 输入 数据 的 MIME 
的 类 型 。 

【实践 案例 5-11】 

本 案例 直接 使 用 canvas API 将 图 像 输 出 到 dataURL， 其 具体 步骤 如 下 所 示 。 

(1) 添 加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 canvas 元 素 、 类 型 为 button 的 input 
元 素 和 img 元 素 ， 它 们 分 别 表 示 绘 制 的 图 像 、 要 执行 的 输出 操作 及 输出 的 图 像 。 页 面具 体 
代码 如 下 所 示 : 


(2) 页 面 加 载 时 直接 调用 draw0 函 数 显示 绘制 的 图 形 ， 该 函数 主要 使 用 save0 函 数 、 
resotre0 函 数 和 arc0 函 数 等 。 其 具体 代码 如 下 所 示 : 


(3) 单 击 【输出 图 像 】 按 钮 触发 其 onclick 事件 ， 调 用 draw0 函 数 ， 该 函数 将 canvas 
元 素 绘制 的 图 像 输出 到 页 面 的 img 元 素 中 。 其 具体 代码 如 下 所 示 : 


(4) 运行 上 述 代码 ， 单 击 【 输 出 图 像 】 按钮 进行 测试 ,页面 的 最 终 效果 如 图 5-11 所 示 。 
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图 5-11 输出 图 像 时 的 效果 


5.5.2 ”坐标 变换 


HTML 5 绘制 图 形 时 是 以 坐标 点 为 基准 来 进行 绘制 的 ， 默 认 情 况 下 画布 的 最 左上 角 对 
应 于 坐标 轴 的 原点 〈0，0)。 如 果 对 这 个 坐标 轴 进 行 改变 ， 就 可 以 实现 图 形 的 变换 处 理 了 。 
HIML 5 中 对 坐标 的 变换 处 理 有 3 种 方式 ， 其 具体 说 明 如 下 所 示 。 

(1) 平移 

绘制 平移 图 形 主要 通过 translate0 函 数 来 实现 ， 该 函数 的 语法 形式 如 下 所 示 : 


translate0 〇 函数 包含 两 个 参数 ，x 表示 将 坐标 轴 原 点 向 右 移动 若干 个 单位 ， 默 认 情况 下 
以 像素 为 单位 ，y 表示 将 坐标 轴 原 点 向 下 移动 若干 个 单位 ， 默 认 情况 下 以 像素 为 单位 。 

(2) 缩小 或 放大 

缩小 或 放大 图 形 时 需要 调用 scale0 函 数 ， 该 函数 的 语法 形式 如 下 所 示 : 


scale0 函 数 包含 两 个 参数 ，x 表示 水 平方 向 的 放大 倍数 ; y 表示 垂直 方向 的 放大 倍数 。 
如 果 要 实现 图 形 缩小 的 效果 ,设置 参数 x 和 y 为 0 一 1 之 间 的 小 数 即 可 ， 如 0.5 表示 将 图 形 
缩小 一 半 。 

(3) 旋转 

绘制 旋转 图 形 主要 通过 rotate() 函 数 来 实现 ， 该 函数 的 语法 形式 如 下 所 示 : 


rotate0 函 数 中 只 包含 一 个 参数 angle， 该 参数 表示 旋转 的 角度 ， 旋 转 的 中 心 点 是 坐标 轴 
的 原点 。 旋 转 是 以 顺 时 针 方 向 进行 的 ， 如 果实 现 逆 时 针 旋转 图 形 的 效果 直接 将 参数 angle 
的 值 设 定 为 负数 就 可 以 了 。 

【实践 案例 5-12】 

本 案例 具体 讲解 如 何 利用 坐标 变换 的 方法 绘制 变形 的 图 形 。 首 先 将 当前 的 坐标 进行 平 
移 ， 然 后 在 循环 中 反复 使 用 平移 、 图 形 缩 放 及 图 形 旋 转 这 3 个 方法 ， 最 终 绘制 出 一 个 很 漂 
亮 的 变形 图 形 。 其 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 ， 该 元 素 用 于 显示 绘 
制 的 变形 图 形 。 其 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 JavaScript 脚本 中 的 draw0 函 数 ， 该 函数 实现 绘制 变形 图 形 的 效 
果 。 其 具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 translate0 函 数 平移 | 
坐标 ， 接 着 通过 for 语句 循环 绘制 图 形 ， 
fillStyle 属性 表示 绘制 图 形 时 的 填充 颜色 。 内 | 
层 for 语 句 中 分 别 调用 translate0 函 数 、rotate() > 
函数 和 scale0 函 数 对 图 形 进行 操作 ，arc0 函 上 
数 用 于 绘制 圆 形 。 ; 

(3) 运行 上 述 代码 进行 测试 ， 其 最 终 效 
果 如 图 5-12 所 示 。 5-12 ”变换 坐标 的 运行 效果 


5.5.3 ”和 矩阵 变换 


上 一 节 已 经 介绍 了 如 何 利用 坐标 变换 实现 图 形变 形 技 术 ， 当 利用 坐标 变换 不 能 满足 需 
要 时 可 以 利用 另外 一 种 比较 复杂 的 技术 一 一 变换 矩阵 。 

介绍 矩阵 变换 之 前 首先 介绍 一 下 变换 矩阵 ， 德 阵 是 用 来 专门 实现 图 形变 形 的 ， 它 与 坐 
标 一 起 配合 使 用 达到 变形 的 目的 。 当 图 形 上 下 文 被 创建 完毕 时 ， 事 实 上 也 创建 了 一 个 默认 
的 变换 矩阵 ， 如 果 不 对 这 个 矩阵 进行 修改 ， 那 么 接 下 来 绘制 的 图 形 将 以 画布 的 最 左上 角 为 
坐标 原点 进行 绘制 图 形 。 绘 制 出 来 的 图 形 不 经 过 缩放 变形 处 理 ， 但 是 如 果 对 这 个 变换 矩阵 
进行 修改 ， 那 么 情况 就 不 一 样 了 。 

使 用 上 下 文 对 象 的 transform0) 函 数 可 以 实现 变换 矩阵 ， 该 函数 的 语法 形式 如 下 所 示 : 


上 述 语法 中 mal、ma2、mbl 和 mb2 用 来 修改 使 用 这 个 方法 之 后 绘制 图 形 的 计算 方法 ， 
从 而 达到 变形 的 目的 。dx 和 dy 用 来 移动 坐标 原点 ，dx 表示 将 坐标 原点 在 x 轴 上 向 右 移动 
x 个 单位 ，dy 表示 将 坐标 原点 在 y 轴 上 向 下 移动 y 个 单位 。 默 认 情 况 下 dx 和 dy 都 以 像素 
为 单位 。 

坐标 变换 中 的 3 种 函数 实际 上 都 隐 式 地 修改 了 变换 矩阵 ， 它 们 都 可 以 使 用 transform() 
函数 来 代替 。 其 具体 说 明 如 下 所 示 。 

口 translate(x,y) 

可 以 使 用 context.transform(1,0,0,1,x,y) 或 contex.transform(0,1,1.0.x,y) 函 数 进行 代 蔡 , 前 
面 4 个 参数 表示 不 对 图 形 进 行 操作 ， 将 dx 设 为 x 表示 将 坐标 原点 向 右 移动 x 个 单位 ，dy 
设 为 y 表 示 将 坐标 原点 向 下 移动 y 个 单位 。 

DD scale(x,y) 

可 以 使 用 context.transform(x,0,0,y,0,0) 或 context.transform(0,y,x,0,0) 函 数 进 行 代 蔡 ， 前 
面 4 个 参数 表示 将 图 形 横向 扩大 或 缩小 ) x 倍 ， 纵 向 扩大 或 缩小 ) y 倍 ，dx 和 dy 表示 
坐标 原点 不 移动 。 

口 rotate(x,y) 

替换 方法 如 下 所 示 : 


上 述 两 段 代 码 中 前 4 个 参数 以 三 角 函 数 的 形式 表示 出 来 ， 共 同 完成 图 形 按照 angle 角 
度 的 顺 时 针 旋 转 处 理 ，dx 和 dy 为 0 表示 不 移动 坐标 原点 。 

使 用 transformO 函 数 后 ， 要 绘制 的 图 形 都 会 按照 移动 后 的 坐标 原点 与 新 的 变换 矩阵 相 
结合 的 方法 进行 重 置 ， 必 要 时 可 以 使 用 setTransform0 函 数 将 变换 矩形 进行 重 置 。 该 函数 的 
语法 形式 如 下 所 示 : 


上 述 语法 中 参数 的 用 法 与 transform0) 函 数 相同 ， 实 际 上 该 函数 的 作用 是 将 画布 上 的 最 
左上 角 重 置 为 坐标 原点 ， 当 图 形 上 下 文 创 建 完毕 时 将 所 创建 的 初始 变换 矩阵 设置 为 当前 变 
换 矩 阵 ， 然 后 使 用 transform( 〇 函数 。 

【实践 案例 $5-13】 

本 案例 具体 讲解 如 何 利用 transform0 函 数 来 绘制 矩形 变换 的 效果 。 其 具体 实现 步骤 如 
下 所 示 。 

(1) 添加 新 的 HTML 页面， 在 页 面 的 合适 位 置 添加 canvas 元 素 ， 该 元 素 显示 绘制 后 
的 矩阵 。 有 具体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 JavaScript 中 的 draw0O 函 数 ， 该 函数 用 于 绘制 变换 的 矩阵。 其 具 
体 代码 如 下 所 示 : 


上 述 代码 首先 调用 transformmO 函 数 平移 绘制 的 坐标 ， 接 着 调用 beginPathO 函 数 绘制 开 
始 路 径 。 然 后 在 for 语句 中 调用 filRect0 函 数 循环 绘制 算 形 ，transform0 函 数 实现 图 形 的 旋 
转 效 果 ， 最 后 调用 closePath0 函 数 关闭 绘制 路 径 。 

(3) 运行 本 示例 的 代码 查看 效果 ， 最 终 运行 效果 如 图 5-13 所 示 。 


图 5-13 ”矩阵 变换 运行 效果 


使 用 translate() 函 数 和 rotate() 函 数 也 可 以 实现 本 示例 的 效果 , 感 兴趣 的 读者 
可 以 亲自 动手 试 一 试 。 


5.6 ”组合 多 个 图 形 


使 用 canvas API 除了 可 以 绘制 简单 的 图 形 〈 如 圆 形 和 和 矩形)、 绘 制 渐变 图 形 及 变形 图 
形 外 ， 还 可 以 通过 它 组 合 多 个 图 形 。 

组 合 多 个 图 形 是 指 可 以 将 图 形 重 县 绘制 在 另 一 个 图 形 上 面 ， 但 图 形 中 能 够 被 看 到 的 部 
分 完全 取决 于 以 哪 种 方式 进行 组 合 ， 在 HIML 5 中 直接 修改 上 下 文 对 象 
globalCompositeOperation 属性 的 值 即 可 。 它 的 使 用 语法 如 下 所 示 : 


以 图 形 组 合 的 方式 有 多 种 ， 直 接 将 值 指定 到 上 述 语法 中 的 type 位 置 即 可 。type 的 属性 
值 有 多 个 ， 其 具体 说 明 如 表 5-1 所 示 。 


表 5-1 type 属性 的 值 


SOUICe-OVeT 默认 设置 ， 表 示 新 图 形 会 覆盖 在 原 有 图 形 之 上 
destination-over 会 在 原 有 图 形 之 上 绘制 新 图 形 
source-in 新 图 形 仅仅 出 现 与 原 有 图 形 相 重 辣 的 部 分 ， 其 他 区 域 都 变 成 透明 的 


destination-in 原 有 图 形 中 与 新 图 形 重 县 的 部 分 会 被 保留 ， 其 他 区 域 都 变 成 透明 的 


source-out 只 有 新 图 形 中 与 原 有 内 容 不 重 羡 的 部 分 会 被 绘制 出 来 
destination-out 原 有 图 形 中 与 新 图 形 不 重合 的 部 分 会 被 保留 
source-atop 只 绘制 新 图 形 中 被 原 有 图 形 重 盖 落 盖 的 部 分 与 原 有 图 形 未 被 重 辣 获 盖 的 其 他 部 


分 ， 新 图 形 的 其 他 部 分 变 成 透明 的 

destination-atop 只 绘制 原 有 图 形 中 被 新 图 形 重 丕 覆盖 的 部 分 与 新 图 形 的 其 他 部 分 ， 原 有 图 形 中 
的 其 他 部 分 变 成 透明 的 ， 不 绘制 新 图 形 中 与 原 有 图 形 相 重 车 的 部 分 

lighter 两 图 形 中 重 营 部 分 做 加 色 处 理 

darker 两 图 形 中 重合 的 部 分 做 减 色 处 理 

xor 重 半 的 部 分 会 变 成 透明 的 

cpy, 只 有 新 图 形 会 被 保留 ， 其 他 都 被 清除 掉 


下 面 通过 一 个 简单 的 案例 实现 组 合 多 个 图 形 的 效果 。 

【实践 案例 5-14】 

本 案例 中 通过 循环 设置 globalCompositeOperation 属性 的 值 实现 组 合 图 形 的 多 个 效果 。 
其 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 12 个 宽度 为 110、 高 度 为 110 的 
canvas 元 素 ， 它 们 用 来 显示 组 合 图 形 的 多 个 效果 。 页 面 的 主要 代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 JavaScript 脚本 中 的 draw0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 首先 声明 了 一 个 数组 变量 保存 type 属性 的 所 有 值 ， 然 后 通过 for 语句 显示 
canvas 元 素 的 组 合 效果 图 。 在 for 语句 中 首先 调用 fllRectO 函 数 绘制 填充 颜色 为 蓝 色 的 正 
方形 , 接着 指定 globalCompositeOperation 属性 的 值 , 然后 调用 arc0 函 数 绘 制 填充 颜色 为 红 
色 的 圆 形 。 

(3) 运行 本 示例 的 代码 查看 效果 ， 页 面 的 最 终 运行 效果 如 图 5-14 所 示 。 
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5-14 组 合 图 形 的 运行 效果 


5.7 ”为 图 形 绘制 阴影 


HTML 4 之 前 的 版 本 在 网 页 中 显示 一 个 图 形 或 一 张 图 片 非常 单调 ， 为 图 形 或 文字 添加 
效果 时 常 借助 样式 实现 。 而 在 HIML 5 中 直接 通过 canvas API 就 可 以 实现 图 形 、 图 片 和 文 
字 等 的 阴影 效果 ， 从 而 达到 立体 显示 的 效果 。 

使 用 canvas 元 素 添加 阴影 效果 时 需要 设置 上 下 文 对 象 的 相关 属性 , 这 些 属 性 的 具体 说 
明 如 下 所 示 。 

口 shadowOffsetX 阴影 与 图 形 的 横向 位 移 量 。 

口 shadowOffsetY 图 形 与 阴影 的 纵向 位 移 量 。 

口 shadowBlur 阴影 的 模糊 范围 ， 默认 值 为 1。 设 定 该 属性 值 时 必须 设 定 为 比 0 大 

的 数字 ， 它 的 值 一 般 在 0 到 10 之 间 ， 否 则 将 会 被 忽略 。 
口 shadowColor 阴影 的 颜色 ， 默 认 值 为 全 透明 的 黑色 。 它 的 值 可 以 是 标准 的 CSS 
磊 色 值 。 

shadowOffsetX 和 shadowOffsetY 用 于 设 定 阴影 在 x 轴 和 y 轴 的 延伸 距离 , 它们 是 不 受 
变换 矩阵 影响 的 ， 负 值 表示 阴 影 会 向 上 或 向 左 延 伸 ， 正 值 则 表示 会 向 下 或 向 右 延 促 ， 它 们 
的 默认 值 都 是 1。 

【实践 案例 5-15】 

本 案例 通过 阴影 的 相关 属性 分 别 为 图 形 和 文字 实现 阴影 的 效果 ， 其 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 两 个 canvas 元 素 ， 它 们 分 别 显示 


图 形 和 文字 的 阴影 效果 。 页 面具 体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 分 别 调用 JavaScript 中 的 PicShadow0 函 数 和 ZiShadow0) 函 数 ， 
PicShadow0 函 数 实现 图 形 阴影 ， ZiShadow0 函 数 实现 文字 阴影 。 它们 的 具体 代码 如 下 所 示 : 


上 述 代 码 中 PicShadow0 函 数 首先 将 图 形 的 shadowOffsetX 和 shadowOffsetY 的 属性 值 
设置 为 15， 它 们 表示 横向 和 纵向 的 偏 移 量 ; 然后 分 别 设置 阴影 效果 和 阴影 的 颜色 ， 最 后 调 
用 arc0 函 数 绘制 圆 形 。ZiShadow0) 函 数 首 先 将 文字 的 shadowOffsetX 和 shadowOffsetY 的 属 
性 值 设 置 为 负 值 ;接着 分 别 设置 shadowBlur 和 shadowColor 的 属性 值 ,最 后 通过 strokeText() 
函数 绘制 文字 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 最 终 效 果 如 图 5-15 所 示 。 


5.8 ”图像 的 简单 操作 


HTML 5 不 仅 可 以 使 用 canvas API 绘制 图 形 ， 还 可 以 读 取 磁 盘 或 网 络 中 的 图 像 文件 ， 
然后 使 用 canvas API 将 图 像 绘 制 在 画布 中 。 本 节 将 详细 介绍 如 何 使 用 canvas API 对 图 像 进 
行 简 单 的 操作 ， 如 绘制 图 像 、 平 铺 图 像 和 裁剪 图 像 等 。 


5.8.1 绘制 图 像 


HTML 5 绘制 图 像 需要 使 用 drawImageO 函 数 ， 该 函数 有 3 种 使 用 格式 。 它 们 的 语法 形 
式 如 下 所 示 : 


上 述 语法 形式 中 第 一 个 drawImage0 函 数 传 入 3 个 参数 :image 可 以 表示 img 元素、video 
元 素 或 者 JavaScript 中 的 一 个 image 对 象 ， 使 用 该 参数 代表 的 实际 对 象 来 装载 图 像 文件 ，x 
和 y 分 别 表 示 绘 制图 像 在 画布 中 的 起 始 横 坐标 和 纵 坐 标 。 使 用 该 函数 绘制 出 来 的 图 像 与 原 
图 大 小 相同 。 

相 比 第 一 个 drawImage0 〇 函数 而 言 , 第 二 个 函数 中 传 入 了 5 个 参数 , 它 可 以 对 图 像 实 现 
缩放 效果 。 前 三 个 参数 的 说 明 可 以 参考 第 一 个 函数 ，width 和 height 属性 分 别 表示 绘制 图 
像 的 宽度 与 高 度 。 

第 三 个 drawImage0 函 数 比 较 复杂 , 它 可 以 用 来 将 画布 中 已 绘制 的 图 像 的 全 部 或 者 局 部 
区 域 复制 到 画布 中 的 另外 一 个 位 置 。 该 函数 传 入 了 9 个 参数 ， 这 些 参数 的 具体 说 明 如 下 
所 示 。 
image 表示 被 复制 的 图 像 文件 。 
sX 表示 源 图 像 的 被 复制 区 域 在 画布 中 的 起 始 横 坐 标 。 
sy 表示 源 图 像 的 被 复制 区 域 在 画布 中 的 起 始 纵 坐 标 。 
sWidth 表示 被 复制 区 域 的 宽度 。 
sHeight 表示 被 复制 区 域 的 高 度 。 

dx 表示 复制 后 的 目标 图 像 在 画布 中 的 起 始 横 坐 标 。 

dy 表示 复制 后 的 目标 图 像 在 画布 中 的 起 始 纵 坐标 。 

dWidth 表示 复制 后 的 目标 图 像 的 宽度 。 

dHeight 表示 复制 后 的 目标 图 像 的 高 度 。 

下 面 通过 一 个 简单 的 示例 演示 如 何 绘制 图 像 。 

【实践 案例 5-16】 

绘制 图 像 的 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 4 个 canvas 元 素 ， 它 们 分 别 显示 


DOOOOOOOO 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


不 同 的 图 像 。 页 面 的 具体 代码 如 下 所 示 : 


<body onLoad="drawPicture (1) ,drawPicture (2) ,drawPicture (3) ,drawPicture (4) "> 
<canvas id="myCanvasl" width="155"” height="155" style=" margin-left: 
14px; "></canvas> 
<canvas id="myCanvas2" width="155" height="155" style="margin-left: 
14px; "></canvas> 
<canvas id="myCanvas3" width="155" height="155" style="margin-left: 
14px; "></canvas> 
<canvas id="myCanvas4" width="155" height="155" style="margin-left: 
14px;"></canvas> 

</body> 


(2) 页 面 加 载 时 调用 drawPicture0) 函 数 ， 向 该 函数 中 传递 不 同 的 参数 ， 分 别 绘制 不 同 
的 图 像 。 该 函数 的 具体 代码 如 下 所 示 : 


function drawPicture(id) { 
Var ctx = document .getElementById ("myCanvas"+id) .getContext ('2d"'); 
var img = new Image(); 
img.src = 'tuxiangimages/b ‘+id+".jpg"; 
img.onload = function(){ 
ctx.drawImage (img, 0,0,155,155); 
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上 述 代码 首先 使 用 不 带 参数 的 new 方法 创建 image 对 象 ， 然 后 设 定 该 对 象 的 src 属性 
值 为 需要 绘制 的 图 像 文件 的 路 径 。 如 果 某 些 图 像 文件 比较 大 ， 则 需要 耐心 等 待 图 像 全 部 装 
载 完毕 才能 看 见 该 图 像 ， 所 以 直接 使 用 img.onload = function0O 人 即 可 。 ee image 对 
象 中 的 onload 事件 中 同步 执行 绘制 图 像 的 函数 ， 然 后 就 可 以 一 边 加 载 一 边 绘 制 了 。 最 后 在 
加 载 时 调用 drawImage0 函 数 绘 制图 像 , 在 该 函数 中 传递 5 tater 指定 绘 
制 的 图 像 大 小 为 150X150。 

(3) 运行 本 示例 的 代码 进行 测试 ， 页 面 的 最 终 运行 效果 如 图 5-16 所 示 。 


图 5-16 绘制 图 像 的 运行 效果 


斌 可 以 向 hamidee0 分 别传 递 3 个 参数 和 9 个 参数 分 别 实现 绘制 图 像 
和 复制 图 像 的 功能 ， 感 兴趣 的 读者 可 以 亲自 动手 试 一 试 


5.8.2 图像 平 铺 


绘制 图 像 时 非常 重要 的 一 个 技术 是 图 像 平 铺 技术 ， 图 像 平 铺 即 按照 一 定 的 比例 缩小 图 
像 并 将 画布 铺 满 。 图 像 平 铺 功 能 的 实现 有 两 种 方式 : 使 用 上 下 文 对 象 的 drawImageO 函 数 或 
者 createPattern() 函 数 。createPatterm() 函 数 的 语法 形式 如 下 所 示 : 


上 述 语 法 形式 中 createPattem() 函 数 包含 两 个 参数 ，image 表示 平 铺 的 图 像 ，type 表示 
平 铺 的 类 型 。 该 值 的 具体 内 容 如 下 所 示 。 

口 repeat-x 横向 平 铺 。 

口 repeat-y 纵向 平 铺 。 

口 no-repeat 不 平 铺 。 

口 ”repeat 全 方向 平 铺 。 

使 用 createPattern0) 函 数 实现 平 铺 图 像 的 功能 比 使 用 drawImage0 函 数 要 简单 得 多 ， 只 
需要 几 个 简单 的 步骤 即 可 轻松 完成 。 其 主要 步骤 如 下 所 示 。 

(1) 创建 image 对 象 并 指定 图 像 文件 ， 使 用 createPattern() 函 数 创建 填充 样式 。 

(2) 将 样式 指定 给 图 形 上 下 文 对 象 的 fllStyle 属性 。 

(3) 填充 画布 。 

【实践 案例 5-17】 

本 案例 分 别 使 用 drawImage0 函 数 和 createPattermm0) 函 数 实现 图 像 的 平 铺 ， 单 击 不 同 的 
按钮 查看 图 像 的 平 铺 效 果 。 实 现 的 具体 步骤 如 下 所 示 : 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 和 两 个 类 型 为 button 
的 input 元 素 。 页 面 的 具体 代码 如 下 所 示 。 


(2) 页 面 加 载 或 者 单 击 【drawImageO 函 数 平 铺 】 按 钮 时 触发 onclick 事件 ， 调 用 
drawPicture0 函 数 ， 该 函数 主要 调用 drawImage(O) 函 数 实 现 图 像 平 铺 的 效果 。 其 具体 代码 如 
下 所 示 : 


(3 ) 单 击 【createPattermn(O) 函 数 平 铺 】 按 钮 时 触发 onclick 事件 ， 调 用 drawCreatePattern() 
函数 ， 该 函数 主要 向 createPattem0) 函 数 中 传 入 值 为 “repeat” 的 平 铺 方式 实现 图 像 平 铺 效 
果 。 其 具体 代码 如 下 所 示 : 


(4) 运行 本 案例 查看 平 铺 效果 ， 页 面 加 载 或 单 击 【drawImageO 函 数 平 铺 】 按 钮 时 的 效 
果 如 图 5-17 所 示 。 


图 5-17 调用 drawImage0 函 数 的 平 铺 效 果 


(5) 单 击 【createPattermnO 函 数 平 铺 】 按 钮 时 的 运行 效果 如 图 5-18 所 示 。 
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图 5-18 调用 createPattern0 〇 函数 的 平 铺 效 果 
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5.8.3 图 像 裁剪 和 复制 


图 像 裁剪 是 指 在 画布 内 使 用 路 径 时 只 绘制 该 路 径 区 域内 的 图 像 ， 而 不 绘制 路 径 外 部 的 
图 像 。 

使 用 上 下 文 对 象 的 不 带 参数 的 clip0 函 数 可 以 实现 图 像 的 裁剪 功能 , 该 函数 使 用 路 径 来 
对 canvas 画布 设置 一 个 裁 前 区 域 ， 因 此 必须 创建 路 径 ， 创 建 路 径 完成 后 调用 clip0 函 数 设 
置 裁 前 区 域 。 

另外 ，5.8.1 节 已 经 介绍 过 drawImageO 函 数 的 多 种 形式 ， 如 果 该 函数 带 有 9 个 参数 则 
可 以 实现 图 像 复 制 的 功能 ， 该 功能 也 可 以 看 作 是 变相 地 实现 了 图 像 裁剪 的 功能 。 

下 面 分 别 通过 clip0 函 数 和 drawImage0 函 数 实现 图 像 的 裁 前 和 复制 功能 。 

【实践 案例 5-18】 

实现 图 像 裁剪 和 复制 功能 的 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 和 input 元 素 。 页 面 的 
具体 代码 如 下 所 示 : 


(2) 页 面 加 载 或 者 单 击 【clipO 函 数 裁剪 】 按 钮 时 调用 draw0 函 数 实现 图 像 裁 前 的 效果 。 
该 函数 的 具体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


img.src="tuxiangimages/a 1.gif"; // 设 置 图 像 路 径 
context .beginPath (); // 开 始 绘制 路 径 
context .closePath (); // 结 束 绘制 路 径 
context.save(); 

context.arc(150,150,150,0,Math.PI*2, true); // 绘 制 圆 形 

context .clip(); // 切 割 选 中 的 圆 形 区 域 
Context .stroke (); // 填 充 切 割 的 路 径 
context .drawImage (img, 0,0,300,300); // 被 切割 的 图 像 


Context .restore () 7 
document .getElLementById("myCanvas") .style.display = "none" 
. 


上 述 代 人 码 首先 创建 image 对 象 ， 然 后 调用 arc0 函 数 绘制 圆 形 ， 接 着 调用 clip0 函 数 进 
行 图 像 裁 前 ， 调 用 drawImage0) 函 数 绘制 裁剪 后 的 图 像 。 
(3) 单 击 【drawImageO 函 数 复制 】 按 钮 ， 调 用 drawImage0) 函 数 实现 图 像 复 制 ( 如 裁 
剪 ) 的 效果 。 该 函数 的 具体 代码 如 下 所 示 : 


function drawImage () { 
document .getElementById ("myCanvas") .style.display = "block"; 
Var content = document .getElementById ("myCanvas"); 
Var cxt = Content .getContext ("2d"); 
var img = new Image(); 
img.src = "tuxiangimages/a 1.gif"; 
img.onload = function () { 
cxt.drawImage (img, 50, 150, 300, 300,0,0,300,300); 


document .getElementById ("myCanvas2") .style.display = "none"; 
; 


上 述 代 码 首先 创建 image 对 象 img 并 且 指 定 该 对 象 的 src 属性 ， 然 后 在 img 对 象 的 
onload 事件 中 调用 drawImage0 函 数 ， 且 向 该 函数 传 入 9 个 参数 ， 直 接 实现 图 像 复 制 (或 裁 
剪 ) 的 效果 。 

(4) 运行 页 面 分 别 单 击 【clipO 函 数 裁剪 】 按 钮 和 【drawImage0 函 数 复 制 】 按 钮 进行 测 
试 ， 最 终 运 行 效果 如 图 5-19 和 图 5-20 所 示 。 
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图 5-19 调用 clip0 函 数 的 运行 效果 图 5-20 调用 drawImasge0 函 数 的 运行 效果 


5.9 项 目 案例 : 绘制 小 车 深 动 特效 


前 面 已 经 通过 大 量 的 案例 演示 了 如 何 使 用 HTML 5 中 的 canvas API 实现 绘制 图 形 和 图 
像 的 功能 ， 本 节 项 目 案例 利用 HTML 5 中 的 canvas API 实现 绘制 动画 的 特效 。canvas API 
并 不 是 专门 为 动画 设计 的 ， 所 以 会 有 一 些 限制 ， 其 中 最 大 的 限制 是 图 像 一 旦 绘制 出 来 就 处 
于 绘制 完成 的 状态 了 ， 如 果 要 移动 它 就 需要 对 所 有 的 内 容 进 行 绘制 。 

对 画布 绘制 实现 动画 的 步骤 如 下 所 示 。 

(1) 预先 编写 好 用 来 绘制 的 函数 ， 在 该 函数 中 首先 用 clearRectO 函 数 将 画布 整体 或 局 
部 探 除 。 

(2) 使 用 setImtervalO 函 数 设置 动画 的 间隔 时 间 。 

【实例 分 析 】 

本 案例 通过 canvas API 实现 绘制 小 车 滚动 的 动画 特效 ， 实 现 该 效果 的 具体 步骤 如 下 
所 示 


(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添 加 canvas 元 素 和 button 控件 ， 它 们 
分 别 显示 小 车 滚动 特效 及 要 执行 的 操作 。 页 面具 体 代码 如 下 所 示 ; 


(2) 页 面 加载 时 调用 initO 函 数 显示 滚动 效果 ， 首 先 声明 全 局 变量 然后 在 该 函数 中 分 别 
调用 drawCanvasO 函 数 和 play0 函 数 。JavaScript 中 的 相关 代码 如 下 所 示 : 


(3) drawCanvas(O) 函 数 为 该 示例 的 主 调 函 数 ， 其 具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 save0 函 数 保存 当前 坐标 值 及 状态 ， 然 后 调用 drawGrass0 函 数 绘制 
背景 ，drawCar() 函 数 绘制 汽车 。 

(4) drawGrass() 函 数 用 来 绘制 背景 ，drawCar0 用 来 绘制 车 身 。 它 们 的 具体 代码 如 下 
所 示 : 


在 drawGrass0 函 数 中 首先 调用 createLinearGradientO 函 数 创 建 线性 渐变 ， 然 后 调用 
addColorStop 为 渐变 指定 渐变 颜色 。 在 drawCar0 函 数 中 调用 fIRectO 函 数 绘制 矩形 ， 
drawTire0 函 数 绘制 小 车 的 轮子 。 


(5) drawTire() 函 数 绘制 车 轮 ， 在 该 函数 中 主要 调用 translate(0) 函 数 、rotate() 函 数 、 
moveTo0 及 lineTo0 等 函数 。 其 具体 代码 如 下 所 示 : 


(6) 单 击 【 速 度 加 快 】 或 【速度 减 慢 】 按 钮 时 调用 speedO) 函 数 更 改 小 车 的 滚动 速度 ， 
然后 向 该 函数 传递 参数 值 。 其 具体 代码 如 下 所 示 : 


(7) 单 击 【开始 滚动 】 或 【和 暂停 滚动 】 按 钮 调用 play0 函 数 实现 小 车 滚动 或 暂停 的 效 
果 ， 其 具体 代码 如 下 所 示 : 


(8) 运行 本 示例 的 代码 进行 测试 ， 最 终 运行 效果 如 图 5-21 所 示 。 


口 4 二 Rs = 
CD ties//a: /rm erg. btal 


图 5-21 动画 特效 运行 效果 


5.10 习题 
一 、 填 空 题 
1. HTML 5 获取 上 下 文 对 象 需要 调用 函数 。 
2. 绘制 文字 时 可 以 通过 设置 属性 的 值 设 置 字体 。 
3. 将 图 形 进 行 平移 需要 调用 函数 。 
4. HTML 5 中 保存 和 恢复 图 形 时 需要 调用 save0O) 函 数 和 函数 。 
函数 用 来 绘制 圆 形 。 
二 、 选 择 题 
1. 关于 canvas 的 说 法 中 ， 选 项 是 正确 的 。 
A. canvas 与 VML 和 SVG 一 样 可 以 用 来 绘制 图 形 ， 它 们 没有 任何 区 别 ， 因 此 可 
以 互 换 使 用 。 


B. SVG 和 VML 如 果 要 从 同一 图 形 中 移 除 元 素 ， 则 需要 擦 掉 绘 制 重新 描绘 。 

C. canvas 最 早 是 Apple 在 Google 1.3 浏览 器 中 引入 ， 目 前 所 有 的 浏览 器 都 提供 对 
它 的 支持 。 

D. canvas 可 以 把 一 个 绘图 API 展现 给 客户 端 JavaScript， 以 使 脚本 能 够 把 想 绘制 
的 东西 都 绘制 到 一 块 画布 上 。 

2. 以 填充 的 方式 绘制 文字 时 需要 调用 函数 。 

A. fllRectO 

B. Text() 

C. fillText() 

D. strokeText() 


3. 函数 可 以 将 图 形 以 base64 位 方式 输出 到 浏览 器 中 。 


A. toDataURL() 

B. strokeRect() 
C. flRectO 
D. drawImage() 

4. 绘制 线性 渐变 和 径 向 渐变 时 都 需要 调用 函数 追加 颜色 的 渐变 效果 。 

. CreateLinearGradient() 

. CcreateRadialGradient() 

. addColorStop() 

. createColorStop() 

5. 绘制 矩阵 变换 效果 时 transform() 函 数 可 以 蔡 换 坐标 变换 中 常用 的 3 个 函数 ,它们 分 


A 
B 
C 
D 


A. fillRect()、scaleO 和 rotate() 

B. translate()、scaleO 和 rotate() 

C. ranslate(0)、scale0 和 fillRect() 
D. fillRectO、strokeRect0 和 rotate() 


三 、 上 机 练习 
1. 绘制 简单 图 形 


在 Dreamweaver CS5 中 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 。 在 
JavaScript 脚本 函数 中 调用 合适 的 函数 绘制 基本 的 图 形 ， 如 直线 、 圆 形 、 拢 形 和 三 角形 等 。 


2. 绘制 线性 渐变 效果 
在 Dreamweaver CS5 中 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 ， 


调用 上 下 文 对 象 的 createLinearGradient0) 函 数 并 结合 addColorStop0 函 数 实现 线性 渐变 的 效 
果 。 页 面 最 终 运行 效果 如 图 5-22 所 示 。 
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图 5-22 上 机 实践 2 运行 效果 
3. 绘制 圆 弧 果 


在 Dreamweaver CS5 中 添加 新 的 HTML 页面 ， 在 页 面 的 合适 位 置 添加 canvas 元 素 。 
在 JavaScript 脚本 函数 中 通过 for 语句 控制 绘制 圆 弧 的 数量 , 调用 transform0O 函 数 改变 图 形 


的 形状 和 位 置 ， 调 用 arcO 函 数 绘制 圆 弧 。 页 面 的 最 终 运 行 效果 如 图 5-23 所 示 。 
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图 5-23 上 机 实践 3 运行 效果 


5.11 实践 疑难 解答 


绘制 不 同 颜色 的 直线 


[x HTML 5 中 如 何 绘制 不 同 颜色 的 直线 
[a 外。 网 络 课 堂 : http://bbs.itzcn.com/thread-19724-1-1.html 


【问题 描述 ]， 本 人 最 近 初学 HTML 5 中 的 绘图 技术 ， 页 面 中 的 具体 代码 如 下 所 示 : 


请 问 我 需要 添加 什么 代码 能 使 绘制 出 来 的 两 条 直线 的 颜色 不 同 ? 

【解决 办 法 】 这 位 同学 ，stroke0 函 数 可 以 绘制 直线 ， 你 上 面 的 代码 中 虽然 绘制 了 两 条 
直线 并 且 为 strokeStyle 属 性 指定 了 不 同 的 颜色 值 , 但 是 你 仅仅 调用 了 一 个 stroke0 函 数 维护 ， 
所 以 绘制 出 来 的 颜色 以 第 二 种 为 主要 想 绘制 两 条 颜色 不 同 的 直线 , 你 需要 使 用 两 个 stroke() 
函数 并 且 第 一 条 直线 绘制 完成 后 调用 beginPath0 重 新 指定 绘制 的 路 径 即 可 。 重 新 修改 上 述 
代码 ， 其 JavaScript 中 的 具体 代码 如 下 所 示 : 


基于 HTML 5 的 文件 上 伟 
第 0 章 


HTML 5 提供 了 一 个 关于 文件 操作 的 文件 API〈 应 用 程序 编程 接口 )， 通 过 使 用 这 个 
API， 对 于 从 Web 页 面 上 访问 本 地 文件 系统 的 相关 处 理 将 会 变 得 十 分 简单 。 本 章 将 针对 这 
个 文件 API 做 详细 介绍 。 另 外 ， 到 目前 为 止 只 有 部 分 浏览 器 对 文件 API 提供 支持 ， 比 如 最 
新 版 的 Firefox 浏览 器 。 本 章 将 详细 介绍 文件 的 选择 和 读 取 两 方面 的 相关 知识 。 


丸 练 掌握 使 用 Blob 对 象 获取 文件 类 型 和 大 小 

掌握 文件 类 型 的 过 滤 操 作 

熟练 掌握 文件 上 传 的 实现 步 又 

简单 了 解 FileReader 接口 

熟练 掌握 使 用 FileReader 接口 中 的 方法 实现 图 片 和 文件 的 读 取 操 作 
掌握 FileReader 接口 中 的 事件 处 理 

了 解 常见 读 取 错 误 的 处 理 方法 


6.1 使 用 file 对 象 选择 文件 


VVvVvv vvyvyv 


在 HTML 4 中, 可 以 通过 file 元 素来 选择 一 个 文件 用 于 上 传 操作 , 但 是 在 HIML 5 中 ， 
通过 添加 multiple 属性 , file 元 素 允 许 一 次 选择 多 个 文件 , 该 元 素 中 的 每 一 个 用 户 选择 的 文 
件 都 是 一 个 file 对 象 , 而 FileList 对 象 则 为 这 些 file 对 象 的 列表 , 代表 用 户 选 择 的 所 有 文件 。 
本 节 将 详细 介绍 如 何 使 用 file 对 象 来 实现 单个 和 多 个 文件 的 选择 操作 ， 此 外 ， 还 简单 介绍 
了 对 文件 类 型 进行 过 滤 的 实现 步骤 。 


6.1.1 选择 一 个 文件 


通过 在 页 面 中 指定 input 元 素 的 type 属性 为 fle， 可 以 实现 单个 文件 的 选择 功能 。 每 一 
个 选择 的 文件 都 是 一 个 file 对 象 ， 该 对 象 有 4 个 属性 ， 如 下 所 示 。 

口 name 表示 选中 文件 不 带路 径 的 名 称 。 

口 size 使 用 字 节 表示 的 文件 长 度 。 

口 type 使 用 MIME 类 型 表示 的 文件 类 型 。 

口 lastModifiedDate 表示 文件 的 最 后 修改 日 期 。 


【实践 案例 6-1】 

在 文件 管理 系统 中 ， 用 户 可 以 选择 单个 文件 进行 上 传 操作 (具体 的 上 传 操作 需要 借助 
于 程序 ， 这 里 不 阐述 )， 当 上 传 成 功 之 后 ， 可 将 该 文件 的 信息 展现 给 用 户 ， 以 便于 查看 和 确 
认 。 本 案例 将 模拟 该 功能 ， 实 现 单个 文件 的 选择 和 查看 功能 。 具 体 实 现 步骤 如 下 所 示 。 

(1) 创建 一 个 名 称 为 file.html 的 文件 ， 该 文件 包含 一 个 form 表单 ， 并 在 该 表单 中 创建 
一 个 type 属性 为 file 的 input 元 素 ， 用 于 用 户 选择 文件 ， 具 体 的 代码 如 下 所 示 : 


如 上 述 代码 所 示 ， 在 file.html 页 面 中 创建 了 一 个 id 为 myform 的 表单 域 ， 该 表单 包含 
两 个 元 素 : 文件 选择 框 和 普通 按钮 。 

(2) 在 file.html 页 面 中 定义 一 个 id 为 fileInfo 的 div 层 , 用 于 显示 上 传 的 文件 信息 , 代 
码 如 下 所 示 : 


(3) 创建 bodyLoad0 函 数 和 showFile0 函 数 ， 分 别 实现 fleInfo 层 的 隐藏 和 上 传 文件 的 
显示 功能 。 具 体 的 JavaScript 代码 如 下 所 示 : 


-二 


如 上 述 代码 所 示 ， 在 bodyLoad0 函 数 中 设置 了 fileInfo 层 的 display 属性 为 none， 则 表 
示 fileInfo 层 为 隐藏 状态 ; 在 showFile0 函 数 中 使 用 “document.getElementById("id 值 ")” 获 
取 选 中 的 文件 ， 由 于 该 对 象 的 fles 属性 获取 的 是 一 个 集合 ,因此 需要 使 用 files[0] 的 形式 表 
示 选 中 的 单个 文件 信息 。 


showFile0) 函 数 中 的 fName、fSize、fType、fDate 分 别 对 应 于 fileInfo 层 中 div 
元 素 的 id 属 性 值 , 用 于 将 获取 的 文件 信息 写 入 到 对 应 的 div 层 中 。 在 该 函数 的 
最 后 通过 document.getElementById("fileInfo").style.display="block" 设 置 fileInfo 
层 为 显示 状态 。 


(4) 为 file.html 文件 的 body 元 素 添加 onload 事件 ， 指 向 bodyLoad0 函 数 ， 使 fileInfo 
层 隐藏 。 代 码 如 下 所 示 : 


(5) 为 表单 中 的 普通 按钮 添加 onclick 事件 ， 指 向 showFile0 函 数 ， 显 示 选 择 的 文件 信 
息 。 代 码 如 下 所 示 : 


(6) 为 了 使 文件 管理 系统 更 加 美观 ， 创 建 selectFile html 文件 ， 在 该 文件 中 使 过 ame 
元 素 包含 file-html 文件 。 代 码 如 下 所 示 : 


在 浏览 器 中 预览 selectFile.html 页 面 ， 显 示 效 果 如 图 6-1 所 示 。 


图 6-1 页 面 初始 化 状态 


单 击 【 选 择 文件 】 按 钮 ， 浏 览 本 地 文件 并 选择 单个 文件 ， 然 后 单 击 【文件 上 传 】 按 乌 ， 
显示 选择 的 文件 信息 ， 如 图 6-2 所 示 。 


0u00m503-108jpg 文件 上 全 
文件 名 称 文件 大 小 。 立 件 闫 型 | 文件 修改 日 期 
0u00n503-108. jpg | 33451 宇 节 | inage/ jpeg | ma Sep 19 2012 18:20;55 6MT+0800 (中 国标 准时 间 ) 


图 6-2 显示 选择 的 文件 信息 


6.1.2 选择 多 个 文件 


HIML 5 为 文件 选择 框 新 增 了 multiple 属性 ， 将 该 属性 设置 为 tue 时 ， 用 户 可 以 选择 
多 个 文件 。 

下 面 的 案例 演示 了 HTML 5 中 选择 多 个 文件 的 实现 过 程 。 

【实践 案例 6-2】 

该 案例 仍然 以 文件 管理 系统 为 基础 ， 为 file.html 文件 中 的 文件 选择 框 添加 multiple 属 
性 ， 并 设置 为 tue。 修 改 后 的 表单 域 代码 如 下 所 示 : 


此 时 ， 运 行 和 ie.html 页 面 即 可 实现 多 个 文件 的 选择 功能 。 但 是 ， 在 showFile0 函 数 中 
只 是 获取 了 选择 的 第 一 个 文件 的 信息 ， 之 后 的 文件 信息 并 没有 获取 ， 因 此 在 该 页 面 中 只 会 
显示 单个 的 文件 信息 内 容 。 

为 了 实现 在 单 击 【 文 件 上 传 】 按 钮 后 显示 选择 的 所 有 文件 信息 ,还 需要 修改 showFile0 
函数 ， 具 体 实现 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


function showEile() 


{ 
var files=document .getElementById ("file") .files; // 获 取 选 中 的 所 有 文件 
var tableTitle=" 文 件 名 称 &nbsp; |&nbsp; gnbsp; gnbsp; 文 件 大 小 gnbsp; &nbsp; 
gnbsp; | 
&nbsp; &nbsp; &nbsp; 文 件 类 型 Enbsp; gnbsp; sgnbsp; 1&nbsp; &nbsp; 文件 修改 日 
期 <zhr/>"; 
Var info=""; // 存 储 多 个 文件 信息 
for (var i=0;i<files.length;i++) // 遍 历 选中 的 多 个 文件 
| 
var file=files[i]; 
var fName=file.name; // 获 取 文 件 名 称 
var fSize=file.size+" 字 节 "; // 获 取 文件 大 小 
var fType=file.type; // 获 取 文件 类 型 
var fDate=file.lastModifiedDate; // 获 取 文 件 修改 日 期 
info+=fName+"gnbsp; gnbsp; | gEnbsp; gnbsp; "+fSizet+"é&nbsp; gnbsp; 
&nbsp; gnbsp; "+fTypet+"gnbsp; gnbsp; |"+fDate+"<hr/>"; 
} 
document .getElementById ("fileInfo") .innerHTML=tableTitle+info; 
document .getElementById("fileInfo") .style.display="block"; 
} 


当 使 用 multiple 属性 后 ， 用 户 选 择 的 多 个 文件 实际 上 保存 在 一 个 files 数组 中 ， 其 中 的 
每 个 元 素 都 是 一 个 file 对 象 。 因 此 ， 为 了 获取 每 个 文件 的 信息 需要 对 files 数组 进行 遍历 ， 
再 逐个 获取 文件 的 名 称 、 大 小 、 类 型 和 修改 日 期 。 

最 后 将 fileInfo 层 中 的 table 删除 ， 代 码 如 下 : 


<div id="fileInfo"></div> 


在 本 案例 中 ， 由 于 为 file 类 型 的 input 元 素 添 加 了 multiple 属性 ， 因 此 ， 可 以 通过 该 元 
素 选择 多 个 文件 。 选择 成 功 后 ,【 选 择 文件 】 按 钮 右 侧 将 显示 成 功 选择 文件 的 总 量 ， 当 将 鼠 
标 移动 至 上 面 时 ， 显 示 选 择 的 所 有 文件 的 名 称 。 该 案例 的 运行 结果 如 图 6-3 所 示 。 
文件 管理 系统 
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图 6-3 选择 多 个 文件 


6.1.3 ”通过 类 型 过 滤 选 择 的 文件 


通过 前 面 两 节 的 学 习 可 以 知道 使 用 file 对 象 的 type 属性 可 以 获取 文件 的 类 型 。 因 此 ， 
根据 这 个 特性 可 以 在 JavaScript 中 判断 用 户 选择 的 文件 是 否 为 特定 类 型 ， 从 而 实现 对 文件 
类 型 进行 过 滤 的 功能 。 具 体 流程 如 下 所 示 。 

(1) 当选 择 多 个 文件 后 ， 遍 历 每 一 个 file 对象， 获取 该 对 象 的 类 型 。 

(2) 将 获取 的 对 象 类 型 与 设置 的 过 滤 类 型 进行 匹配 。 

(3) 如 果 不 匹 配 ， 则 提示 上 传 文件 类 型 出 错 或 拒绝 上 传 等 信息 ， 从 而 实现 对 上 传 文件 
的 类 型 进行 过 滤 的 功能 。 

(4) 如 果 匹 配 ， 则 可 成 功 上 传 。 

【实践 案例 6-3】 

在 管理 相册 时 ， 只 允许 上 传 “ 图 片 ”类 型 的 文件 ， 如 果 上 传 的 不 为 图 片 ， 则 弹出 无 法 
上 传 的 提示 信息 ， 并 将 其 他 图 片 进行 上 传 操作 。 当 上 传 完成 之 后 ， 在 页 面 中 显示 出 已 上 传 
的 图 片 总 数 和 未 上 传 的 图 片 信息 。 有 具体 的 实现 步骤 如 下 所 示 。 

(1) 在 页 面 表单 中 创建 一 个 file 类 型 的 input 元 素 ， 并 设置 multiple 属性 为 tue， 用 于 

选择 多 个 文件 。 代 码 如 下 所 示 : 


(2) 在 表单 的 下 方 添加 一 个 id 属性 为 info 的 div 层 ， 用 于 显示 未 能 成 功 上 传 的 图 片 信 
息 ， 如 下 所 示 : 


(3) 定义 showFile0 函 数 ， 用 于 获取 已 经 成 功 上 传 的 文件 总 数 和 未 能 成 功 上 传 的 图 片 
信息 ， 并 将 这 些 信 息 显示 在 id 属性 为 info 的 div 层 中 。 具 体 的 代码 如 下 所 示 : 


这 里 主要 通过 判断 type 属性 的 值 是否 以 “image/” 开 头 来 区 分 图 像 类 型 。 当 用 户 选择 
了 不 为 “图 像 ” 类 型 的 文件 时 ， 将 记录 该 文件 的 信息 ， 并 继续 判断 下 一 个 选择 的 文件 ， 如 
果 用 户 选择 的 文件 为 图 片 ， 则 将 count 值 累加 ， 得 出 总 数量 。 

(4) 为 type 属性 为 button 的 input 元 素 添加 onclick 事件 ， 指 向 showFile0 函 数 ， 代 码 
如 下 所 示 : 


(5) 为 元 素 添加 样式 ， 使 未 能 上 传 的 文件 信息 以 表格 的 形式 来 展现 。CSS 样式 代码 
如 下 所 示 : 


Os 


基于 HTML 5 的 文件 上 传 


background:#ccc; 
} 
</style> 


运行 该 案例 ， 选 择 多 个 文件 ， 单 击 【文件 上 传 】 按 钮 ， 将 在 该 页 面 中 显示 出 已 经 成 功 
上 传 的 文件 总 数 和 未 能 成 功 上 传 的 文件 信息 ， 如 图 6-4 所 示 。 


图 6-4 通过 类 型 过 滤 选 择 的 文件 


6.1.4 通过 accept 属性 过 滤 选 择 的 文件 


在 选择 文件 上 传 后 ， 如 果 能 根据 文件 返回 的 类 型 过 滤 所 选择 的 文件 ， 也 是 一 种 不 错 的 
方法 ， 但 是 这 需要 编写 不 少 代 码 。 在 HIML 5 中 ， 可 以 通过 为 file 类 es input 元 素 添加 
accept 属性 来 指定 要 过 滤 的 文件 类 型 。 在 设置 完 accept 属性 之 后 ， 在 浏览 器 中 选择 文件 时 
会 自动 筛选 符合 条 件 的 文件 。 


提 目前 只 有 Chrome 和 Opera 浏览 器 支持 accept 属性 。 


【实践 案例 6-4】 

在 页 面 表单 中 , 创建 一 个 fie 类 型 的 input 元 素 ， 并 为 该 元 素 添加 一 个 accept 属性， 将 
该 属性 设置 为 “image/jpeg”。 当 用 户 单 击 【 选 择 文件 】 按 钮 时 ， 在 打开 的 文件 选择 窗口 中 ， 
文件 类 型 为 accept 属性 所 设置 的 值 。 有 具体 的 代码 如 下 所 示 : 


<style type="text/css"> 
.ultitlef{f 

list-style:none; 
width:200px; 
height:30px; 
text-align:center; 
font-weight:bold; 
font-size:14px; 


基于 HTML 5 的 文件 上 传 


} 
</script> 


<h2> 文 件 上 传 </h2> 


<form id="myform"> 


<input type="file" id="file" style="border:1lpx solid #A5ACB2; height 


:30px; width:500px" 
multiple="true" accept="image/jpeg"/> 
<input type="button" value=" 文 件 上 传 " onclick="showFile()"/> 
</form> 
<div id="fileInfo"></div> 


该 案例 在 Chrome 浏览 器 中 执行 的 页 面 效 果 如 图 6-5 所 示 。 
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图 6-5 在 chrome 浏览 器 中 的 文件 选择 窗口 


在 Opera 浏览 器 中 浏览 的 效果 如 图 6-6 所 示 。 


图 6-6 在 Opera 浏览 器 中 的 文件 选择 窗口 


Os 


ln 


击 【 打 开 】 按 钮 文件 选择 窗口 关闭 。 然 后 单 击 accepthtml 页 面 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


中 的 【文件 上 传 】 按 钮 ， 显 示 所 有 的 文件 信息 ， 如 图 6-7 所 示 。 


图 6-7 显示 所 有 的 文件 信息 


通过 简单 设置 元 素 的 一 个 属性 ,就 可 以 在 文件 选择 前 过 滤 所 选 文件 的 类 型 ， 
这 种 方法 比较 简单 ， 同 时 操作 也 方便 。 但 是 在 目前 的 浏览 器 中 ，accept 属 
性 还 未 得 到 广泛 的 支持 。 原 因 在 于 ， 即 使 通过 该 属性 设置 了 文件 选择 的 类 
型 ， 但 不 是 该 类 型 的 文件 同样 也 可 以 被 选中 ， 也 能 被 file 元 素 所 接收 ， 因 
此 ， 使 用 这 种 方法 过 滤 上 传 文件 类 型 时 ， 还 需要 谨慎。 


6.2 ”使 用 FileReader 接口 读 取 文件 


FileReader 接口 主要 用 来 将 文件 读 入 到 内 存 中 ， 并 且 读 取 文 件 中 的 数据 。FileReader 
接口 提供 了 很 多 用 于 读 取 文 件 的 方法 ， 以 及 监听 读 取 进 度 的 事件 ， 本 节 将 详细 介绍 该 接 
的 使 用 。 


6.2.1 FileReader 接口 简介 


FileReader 接口 主要 用 来 将 文件 载 入 内 存 并 读 取 文件 中 的 数据 。 该 接口 提供 了 一 组 异 
步 API， 通 过 这 些 API 可 以 从 浏览 器 的 主线 程 中 异步 访问 文件 系统 中 的 数据 。 
于 FileReader 接口 是 HIML 5 的 新 特性 ， 因 此 并 非 所 有 浏览 器 都 支持 。 在 使 用 之 前 
必须 先 判断 浏览 器 是 否 对 FileReader 接口 提供 支持 ， 代 码 如 下 所 示 : 


if(typeof FileReader=="undefined") 
{ 

alert (" 对不起， 您 的 浏览 器 不 支持 FileReader 接口 ， 将 无 法 正常 使 用 本 程序 。"); 
}else{ 

alert ("您 的 浏览 器 环境 正常 。"); 


当 访 问 不 同 的 文件 时 ， 必 须 创 建 不 同 的 FileReader 接口 实例 。 因 为 每 调用 一 次 
FileReader 接口 都 将 返回 一 个 新 的 FileReader 对 象 ， 这 样 才能 访问 不 同文 件 中 的 数据 。 

FileReader 接口 拥有 许多 常用 的 方法 ， 用 于 读 取 文 件 或 响应 事件 ， 如 onabort 事件 触发 
时 ， 需 要 调用 abort0 方 法 。FileReader 接口 的 常用 方法 如 表 6-1 所 示 。 


表 6-1 FileReader 接口 的 常用 方法 


TeadAsBinaryString0 efile 以 二 进 制 格式 读 取 文件 ”调用 该 方法 时 ， 将 fle 对 象 返回 的 数 
内 容 据 块 作为 一 个 二 进 制 字符 串 的 形式 ， 
分 块 读 入 内 存 中 
readAsArrayBuffer() ”fne 以 数组 缓冲 的 方式 读 取 ”调用 该 方法 时 ， 将 file 对 象 返回 的 数 
文件 内 容 据 字 节 数 ， 以 数组 缓冲 的 方式 读 入 内 
存 中 
readAsText() file,encoding ”以 文本 编码 的 方式 读 取 ”encoding 参数 表示 文本 文件 编码 的 方 
文件 内 容 式 , 默认 值 为 UTF-8。 调用 该 方法 时 ， 
以 encoding 指 定 的 编码 格式 将 获取 的 
数据 块 按 文本 方式 读 入 内 存 中 
readAsDataURLO file 以 数据 URL 格式 读 取 文 ”调用 该 方法 时 ， 将 file 对 象 返回 的 数 
件 内 容 据 块 ， 以 一 串 数据 URL 字符 的 形式 
展示 在 页 面 中 ， 这 种 方法 一 般 读 取 数 
据 块 较 小 的 文件 
abort() 无 读 取 数 据 中 止 时 ， 将 自 如果 在 读 取 文件 数据 过 程 中 出 现 异 
动 触发 该 方法 常 或 错误 ， 触 发 该 方法 ， 返 回 错误 代 
码 信息 


6.2.2 ”使 用 readAsDataURL() 方 法 预览 图 片 


通过 FileReader 接口 中 的 readAsDataURL( 方 法 ， 可 以 获取 API 异步 读 取 的 文件 数据 ， 
并 另存 为 一 串 数据 URL 字符 ,将 该 URL 绑 定 到 img 元 素 中 即 可 实现 图 片 文件 预览 的 效果 。 

【实践 案例 6-5】 

该 案例 允许 用 户 选择 多 个 图 片 文件 。 在 表单 提交 后 将 在 页 面 上 显示 上 传 图 片 的 总 数 以 
及 各 图 片 的 缩 略 图 。 具 体 的 实现 步骤 如 下 所 示 。 

(1) 创建 选择 图 片 文件 的 表单 和 用 于 显示 图 片 内 容 和 上 传 图 片 总 数 的 div 元 素 ， 代 码 
如 下 所 示 : 


(2) 创建 readFile0 函 数 ， 获 取 所 有 的 文件 信息 ， 并 对 文件 类 型 进行 过 滤 ， 只 有 “图 像 ” 

类 型 的 文件 才 可 进行 上 传 。 如 果 选 中 的 文件 为 图 片 ， 则 将 记录 的 总 数 加 1， 并 检测 浏览 器 

是 否 支持 FileReader 对 象 ， 如 果 支 持 ， 则 实例 化 一 个 新 的 FileReader 对 象 ， 然 后 将 每 个 文 

件 以 数据 URL 的 方式 读 入 到 页 面 中 。 当 读 取 成 功 时 ， 触 发 onload 事件 ， 在 该 事件 中 ， 通 

过 result 属性 获取 文件 读 入 页 面 中 的 URL 地 址 ， 并 将 该 地 址 与 img 元 素 进行 绑 定 。 最 后 ， 

由 区 通过 id 属性 为 info 的 div 元 素 展现 在 页 面 中 ， 从 而 实现 上 传 图 片 文件 预览 的 效果 。 具 体 的 
代码 如 下 所 示 : 
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elsef 
alert ("没有 选择 文件 ， 不 能 继续 。" 
return false; 
+ 
} 
</script> 


(3) 为 表单 中 的 type 属性 为 button 的 input 元 素 添加 onclick 事件 ， 指 向 readFileO) 函 


数 ， 代 码 如 下 所 示 : 


<input type="button" value=" 显 示 文 件 " onclick="readFile()"> 


运行 该 案例 ， 选 择 多 个 文件 ， 单 击 【显示 文件 】 按 钮 ， 将 显示 成 功 上 传 的 图 片 数量 和 


所 有 图 片 的 缩 略 图 ， 效 果 如 图 6-8 所 示 。 
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图 6-8 使 用 readAsDataURL (方法 预览 图 片 


6.2.3 使 用 readAsText() 方 法 读 取 文 本 文件 内 容 


使 用 FileReader 接口 的 readAsText() 方 法 可 以 以 文本 格式 读 取 文 件 的 内 容 。readAsText() 
方法 有 两 个 参数 : 第 一 个 参数 是 file 类 型 表示 要 读 取 的 文件 ， 第 二 个 参数 字符 串 类 型 用 于 


指定 读 取 时 使 用 的 编码 ， 默 认 值 为 UTF-8。 
【实践 案例 6-6】 


页 面 展现 文本 的 方式 有 很 多 种 ， 可 以 上 传 一 个 文本 文件 ， 系 统 会 对 该 文件 进 


展现 ， 也 可 以 直接 在 页 面 中 编辑 一 段 文本 来 展现 。 当 一 段 文本 需要 在 多 个 地 方 展 
时 ， 在 每 个 地 方 都 编辑 同样 文本 的 方法 是 不 可 取 的 ， 因 此 就 可 以 选择 编辑 一 个 文 


在 多 个 地 方 上 传 并 读 取 该 文件 的 内 容 即 可 。 本 案例 将 通过 FileReader 接口 中 的 readAsText() 
方法 读 取 文 本 文件 内 容 ， 实 现 将 文本 文件 中 的 内 容 展 现在 页 面 上 的 功能 ， 具 体 的 实现 步 又 


如 下 所 示 。 
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(1) 在 页 面 表单 中 ， 新 建 一 个 file 类 型 的 input 元 素 ， 用 于 获取 上 传 的 文本 文件 ， 代 码 
如 下 所 示 : 


(2) 编辑 JavaScript 代码 ， 定 义 readFile0 函 数 ， 实 现 文本 文件 的 读 取 功 能 。 具 体 的 代 
码 如 下 所 示 : 
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如 上 述 代码 所 示 ， 在 readFile0 函 数 中 针对 没有 选择 文件 、 文 件 类 型 不 正确 以 及 浏览 器 
不 支持 FileReader 接口 的 情况 进行 了 判断 ,真正 使 用 readAsText0 方 法 读 取 文件 内 容 的 代码 
非常 简单 ， 不 过 要 注意 结果 属性 result 只 能 在 onload 事件 中 使 用 。 
(3) 为 表单 中 的 普通 按钮 添加 onclick 事件 ， 指 向 readFile0 函 数 ， 代 码 如 下 所 示 : 


<input type="button" value=" 显 示 文 件 " onclick="readFile () "> 

(4) 在 王 盘 中 创建 一 个 名 称 为 news.txt 的 文件 ， 在 该 文件 中 编辑 一 篇 新 闻 内 容 ， 具 体 
如 下 所 示 : 

<h3> 大 四 学 姐 水 过 被 偷 贴 公开 信 吐 槽 标题 带 17 个 叹 号 </h3><br/> 


<p> 记 者 在 微 博 配 的 启事 图 片 中 看 到 ,启事 的 日 期 为 9 月 21 日 晚上 ,标题 为 “大 四 学 姐 的 壶 你 也 敢 
偷 ”， 标 题 后 跟着 整整 17 个 感叹 号 ! </p> 


<p> 这 位 “大 四 学 姐 ” 在 启事 中 称 ， 自 己 帮 含 友 取 了 个 邮包 回来 ， 放 在 看 门 大 权 门 口 的 过 就 不 见 了 。 
“学 姐 ” 唤 哮 道 : “ 姐 都 大 四 了 有 木 有 !!! 姐 的 壶 都 在 那 放 三 年 了 ， 连 盖 都 没 丢 过 !11!” 该 “学 姐 ” 在 措 
述 了 水 壶 的 特征 后 , 更 对 偷 壶 者 大 发 雷霆 道 , “你 脸 上 长 的 那 两 个 是 灯泡 啊 ! 今天 雨 都 下 到 你 脑子 里 啦 ? ” 
还 下 通 习 “赶快 把 壶 还 回来 "”， 不 然 就 代表 全 体 大 四 学 姐 天 天 诅 见 丛谈 者 “ 轿 考 必 挂 "。</p> 


可 以 在 文本 文件 中 编辑 HTML 标签 ，FileReader 接口 中 的 readAsText() 方 法 在 
读 取 文 件 内 容 时 会 解析 这 些 标签 ,使 之 以 HTML 标签 的 样式 来 显示 文本 内 容 。 


运行 程序 ， 单 击 文本 选择 框 左边 的 【选择 文件 】 按 钮 ， 选 择 一 个 “图 像 ”格式 的 文件 ， 
单 击 【显示 文件 ， 将 弹出 文件 类 型 不 正确 的 提示 框 ， 如 图 6-9 所 示 。 


图 6-9 上 传 的 文件 不 为 文本 文件 格式 


当选 择 的 文件 为 文本 文件 格式 时 ， 例 如 王 盘 下 的 news.txt 文件 ， 生 
钮 ， 将 读 取 该 文件 中 的 内 容 并 展现 在 页 面 上 ， 如 图 6-10 所 示 。 
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图 6-10 读 取 文本 文件 内 容 并 展现 在 页 面 上 


6.2.4 FileReader 接口 中 的 事件 


在 FileReader 接口 中 ， 提 供 了 很 多 常用 的 事件 以 及 一 套 完整 的 事件 处 理 机 制 。 通 过 这 
些 事件 的 触发 ， 可 以 清晰 地 捕获 读 取 文件 的 详细 过 程 ， 以 便 更 加 精确 地 定位 每 次 读 取 文件 
时 事件 的 先后 顺序 ， 为 编写 事件 代码 提供 有 力 的 支持 。FileReader 接口 的 常用 事件 如 表 6-2 


所 示 。 
表 6-2 FileReader 接口 的 常用 事件 

事件 名 称 描述 

onloadstart 当 读 取 数 据 开始 时 ， 触 发 该 事件 

onprogress 当 正 在 读 取 数 据 时 ， 触 发 该 事件 

onabort 当 读 取 数 据 中 止 时 ， 触 发 该 事件 

onerror 当 读 取 数 据 失败 时 ， 触 发 该 事件 

onload 当 读 取 数 据 成 功 时 ， 触 发 该 事件 

onloadend 当 请 求 操作 成 功 时 ， 无 论 操 作 是 否 成 功 ， 都 将 触发 该 事件 

经 过 反复 测试 证 明 ， 一 个 文件 通过 FileReader 接口 中 的 方法 正常 读 取 时 ， 触 发 事件 的 

先后 顺序 如 图 6-11 所 示 。 


图 6-11 正常 读 取 文件 时 事件 触发 的 先后 顺序 


针对 图 6-11 的 说 明 如 下 所 示 。 


口 
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大 部 分 的 文件 读 取 过 程 痢 集中 在 onprogress 事件 中 ， 该 事件 耗 时 最 长 。 

如 果 文 件 在 读 取 过 程 中 出 现 异 常 或 中 止 ， 那么 onprogress 事件 将 结束 ， 直 接触 发 
onerror 或 onabort 事件 ， 而 不 会 触发 onload 事件 。 

onload 事件 在 文件 读 取 成 功 时 触发 ， 而 onloadend 虽然 也 是 文件 操作 成 功 时 触发 ， 
但 该 事件 不 论文 件 读 取 是 否 成 功 ， 都 将 触发 。 因 此 ， 想 要 正确 获取 文件 数据 ， 必 
须 在 onload 事件 中 编写 代码 。 


【实践 案例 6-7】 

本 案例 将 通过 一 个 图 片上 传 的 示例 ， 来 介绍 文件 读 取 时 触发 事件 的 先后 顺序 。 具 体 的 
实现 步骤 如 下 所 示 。 

(1) 在 页 面 的 表单 中 ， 添 加 一 个 file 类 型 的 input 元 素 ， 并 指定 accept 属性 值 为 
image/jpeg， 表 明 只 能 选择 jpeg 格式 的 图 片 文件 ， 代 码 如 下 所 示 。 


(2) 创建 一 个 用 于 显示 读 取 文件 过 程 中 所 触发 事件 的 先后 顺序 的 div 层 ， 以 列表 的 形 
式 来 展现 ， 代 码 如 下 所 示 : 


(3) 设置 二 元 素 的 样式 ， 指 定 其 list-style-type 属性 为 decimal，CSS 样式 如 下 所 示 : 


(4) 编辑 JavaScript 代码 ， 定 义 两 个 函数 ， 分 别 用 于 将 显示 信息 的 div 层 隐藏 和 罗列 文 
件 在 正常 读 取 过 程 中 触发 事件 的 先后 顺序 ， 其 具体 的 实现 代码 如 下 所 示 。 


如 上 述 代码 所 示 , 在 showFile0 函 数 中 首先 检测 浏览 器 是 否 支 持 FileReader 对 象 , 如 果 
不 支持 ， 则 弹出 错误 提示 信息 ; 否则， 重新 构造 一 个 新 的 FileReader 对 象 ， 并 对 选择 的 文 
件 以 文本 编码 的 方式 读 入 页 面 。 最 后 ， 列 出 文件 在 正常 读 取 过 程 中 将 触发 的 4 个 事件 ， 在 
每 个 事件 中 ， 都 将 读 取 的 状态 内 容 设 置 为 对 应 元 素 的 文本 内 容 。 
(5) 为 body 元 素 添加 onload 事件 ， 指 向 bodyLoad0 函 数 ， 代 码 如 下 所 示 : 


<body id="page" onload="bodyLoad () "> 
(6) 为 表单 中 的 普通 按钮 添加 onclick 事件 ， 指 向 showFile0 函 数 ， 代 码 如 下 所 示 : 


Ei 


运行 该 页 面 ， 选 择 要 上 传 的 图 片 文 件 ， 单 击 【 文 件 上 传 】 按 钮 ， 读 取 文件 ， 并 将 正常 
读 取 过 程 中 所 触发 事件 的 先后 顺序 罗列 到 页 面 上 ， 如 图 6-12 所 示 。 


© HC 0 file:///F:/project/06/event.htnl 


文件 管理 系统 


图 6-12 文件 读 取 过 程 中 各 事件 执行 的 先后 顺序 


6.3 ”文件 读 取 时 的 错误 与 异常 


虽然 使 用 FileReader 接口 中 的 方法 可 以 快速 实现 对 文件 的 读 取 操作 。 但 是 ， 在 文件 读 
取 的 过 程 中 ,不 可 避免 地 会 出 现 各 种 类 型 的 错误 和 异常 。 这 时 便 可 以 通过 FileError 接口 获 
取 错 误 与 异常 所 产生 的 错误 代码 ,再 根据 返回 的 错误 代码 分 析 具 体 发 生 错误 与 异常 的 原因 。 


6.3.1 发 生 错误 与 异常 的 条 件 
通常 在 使 用 FileReader 接口 的 方法 异步 操作 文件 的 过 程 中 ， 出 现下 列 情况 时 ， 可 能 会 


出 现 潜在 的 错误 与 异常 。 
口 访问 某 个 文件 的 过 程 中 ， 该 文件 被 移动 或 者 删除 及 被 其 他 应 用 程序 修改 。 


由 于 权限 原因 ， 无 法 读 取 文 件 的 数据 信息 。 
文件 出 于 案例 因素 的 考虑 ， 在 读 取 文 件 时 返回 一 个 无 效 的 数据 信息 。 
读 取 文件 太 大 ， 超 出 URL 网 址 的 限制 ， 将 无 法 返回 一 个 有 效 的 数据 信息 。 
在 读 取 文件 的 过 程 中 ， 应 用 程序 本 身 触 发 了 中 止 读 取 的 事件 。 
上 述 列 举 了 各 种 错误 与 异常 的 形成 条 件 ， 错 误 与 异常 都 可 能 在 读 取 文件 的 过 程 中 出 
现 ， 从 而 导致 无 法 使 用 FileReader 接口 中 的 对 象 与 方法 读 取 文件 数据 。 
在 异步 读 取 文 件 的 过 程 中 ， 一 旦 出 现 错误 与 异常 ， 无 法 成 功 返回 文件 数据 ， 便 可 以 使 
用 FileError 接口 。 该 接口 主要 用 于 异步 提示 错误 ， 当 FileReader 对 象 无 法 返回 数据 时 ， 将 
形成 一 个 错误 属性 ， 而 该 属性 则 是 一 个 FileError 接口 ， 通 过 该 接口 列 出 错误 与 异常 的 错误 
代码 信息 。 
【实践 案例 6-8】 
当 用 户 选择 了 要 上 传 的 图 片 文件 后 ， 系 统 将 对 该 文件 进行 读 取 操 作 。 而 在 读 取 的 过 程 
中 可 能 会 出 现 错误 或 异常 ， 因 此 需要 对 这 些 非 正常 执行 的 信息 进行 捕获 。 如 下 面 的 代码 
所 示 : 


如 上 述 代码 所 示 ， 当 文件 数据 读 取 成 功 后 ， 将 触发 onload 事件 ， 以 数据 URL 的 方式 
将 文件 内 容 读 取 到 页 面 中 ， 并 将 该 URL 与 <img> 元 素 绑 定 ， 进 行 图 片 文件 的 预览 功能 。 一 
旦 在 读 取 过 程 中 发 生 了 错误 与 异常 ， 将 触发 onerror 事件 。 在 该 事件 中 ， 通 过 
Ires.target.error.code 获取 出 现 异常 的 错误 代码 ， 根 据 返 回 的 错误 代码 判断 出 现 的 异常 原因 。 

运行 该 页 面 ， 当 选择 一 个 文件 后 ， 如 果 对 该 文件 的 名 称 进行 了 修改 ， 或 将 选择 的 文件 
移动 到 了 另 一 个 位 置 ， 则 当 单 击 【 显 示 文 件 】 按 钮 后 ， 将 在 页 面 中 显示 无 法 正常 读 取 文 件 
的 异常 信息 ， 如 图 6-13 所 示 。 如 果 系统 成 功 读 入 了 选择 的 图 片 文 件 内 容 ， 将 在 页 面 中 显示 
该 图 片 ， 如 图 6-14 所 示 。 
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图 6-13 无 法 成 功 读 取 文件 内 容 图 6-14 成 功 读 取 文件 内 容 


6.3.2 ”错误 代码 说 明 


在 HTML 5 中 ,可 以 调用 FileError 接口 中 的 对 象 ， 捕获 数据 文件 在 读 取 过 程 中 出 现 的 
错误 代码 信息 ， 这 些 错误 代码 及 对 应 的 说 明 如 表 6-3 所 示 。 


表 6-3 FileError 对 象 捕获 的 错误 代码 及 说 明 


错误 代码 错误 常量 说 明 

1 NOT_FOUND ERR 无 法 找到 文件 或 者 原文 件 已 经 被 修改 

2 SECURITY_ ERR 由 于 安全 考虑 ， 无 法 读 取 文 件数 据 

3 ABORT ERR 由 abort 事件 触发 的 中 止 读 取 过 程 

4 NOT_READABLE_ERR ”由 于 权限 原因 ， 不 能 读 取 文件 数据 

5 ENCODING ERR 读 取 的 文件 太 大 ， 超 出 读 取 时 地 址 的 限制 


6.4 项 目 案例 : 多 文件 上 传 至 服务 器 


随 着 Intemet 的 不 断 发 展 ， 在 网 页 中 进行 多 文件 上 传 并 展现 的 功能 随处 可 见 。 通 过 本 
章 的 学 习 可 以 了 解 到 使 用 file 类 型 的 input 元 素 可 以 选择 要 上 传 的 单个 文件 ， 为 该 mput 元 
素 添 加 multiple 属性 则 可 以 实现 多 文件 选择 的 功能 。 当 选择 完成 之 后 , 可 以 使 用 FileReader 
接口 中 的 方法 对 选择 的 文件 进行 读 取 操作 ， 从 而 可 实现 图 像 预 览 、 文本 阅读 的 功能 。 然 而 ， 
并 未 实现 真正 的 上 传 功能 。 本 案例 将 使 用 HIML 5+Struts 2 框架 实现 多 文件 上 传 的 功能 。 

【实例 分 析 】 

在 一 个 企业 网 站 管理 系统 中 可 以 上 传 多 张 本 企业 的 产品 图 像 到 服务 器 中 ， 以 供 客户 查 
看 。 本 案例 使 用 HIML 5 并 结合 Struts 2 框架 实现 多 文件 上 传 至 服务 器 的 功能 ， 具 体 的 实 
现 步骤 如 下 所 示 。 


Os 


基于 HTML 5 的 文件 上 传 


(1) 打开 MyEclipse 开发 工具 ， 创 建 Web 应 用 程序 (Web Project)， 并 命名 为 06。 
(2) 搭建 Struts 2 开发 环境 , 将 Struts 2.2.3 框架 所 需要 的 9 个 JAR 包 复 制 到 Web 应 用 
程序 的 WEB-INF/lib 目录 下 ， 如 图 6-15 所 示 。 


文件 到 ) 编辑 和 查看 GD。 收 豪 习 工具 中 帮助 如 乾 
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图 6-15 ”Web 应 用 程序 所 需要 的 JAR 文件 


(3) 在 web.xml 文件 中 配置 Struts 2 的 核心 过 滤器 StrutsPrepareAndExecuteFilter， 并 配 
置 该 过 滤器 要 拦截 的 URL， 具 体 代 码 如 下 所 示 : 


<!-- 配置 Struts 2 框架 的 核心 Filter --> 

<filter> 
<!-- 配置 Struts 2 核心 Filter 的 名 字 --> 
<filter-name>struts2</filter-name> 
<!-- 配置 Struts 2 核心 Filter 的 实现 类 --> 
<filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepare 
AndExecuteFilter</filter-class> 

</filter> 

<!-- 配置 Filter 拦截 的 URL --> 

<filter-mapping> 
<!-- 过 滤器 拦截 名 称 --> 
<filter-name>struts2</filter-name> 
<!-- 配置 Struts 2 的 核心 FilterDispatcher 拦截 所 有 .action 用 户 的 请 求 --> 
<url-pattern>*.action</url-pattern> 

</filter-mapping> 

<filter-mapping> 
<filter-name>struts2</filter-name> 
<url-pattern>*.jsp</url-pattern> 


</filter-mapping> 


(4) 在 src 目录 下 新 建 com.mxlactions 包 ， 并 在 该 包 中 创建 FileUploadAction， 用 于 实 
现 文件 的 上 传 操 作 ， 具 体 代码 如 下 所 示 : 


package com.mxl .actions; 
import java.io.BufferedInputStream; 
import java.io.BufferedOoutputSstream; 


import java.io.File; 


如 上 述 代码 所 示 ， 在 FileUploadAction 类 中 定义 了 4 个 属性 : File[] upload、String[] 
uploadContentType、String[] uploadFileName 和 String savePath， 分 别 用 于 存储 上 传 文件 域 
的 属性 、 类 型 、 文 件 名 和 保存 路 径 。 除 此 之 外 ， 在 Action 的 默认 执行 方法 execute0 中 处 理 


上 传 文件 时 ， 需 要 循环 遍历 用 户 所 上 传 的 文件 ， 并 多 次 调用 copy0 方 法 进行 写 入 操作 ， 从 
而 将 上 传 的 文件 保存 到 指定 的 目录 中 。 

(5) 在 src 目录 下 新 建 Struts 2 的 配置 文件 strutsxml, 在 该 文件 中 配置 FileUploadAction 
类 ， 并 配置 success 和 input 字符 串 所 对 应 的 Result 映射 ， 具 体 如 下 所 示 : 


如 上 述 配 置 代码 所 示 ， 在 配置 FileUploadAction 类 时 使 用 了 param 元 素 指定 savePath 
属性 值 为 /upload， 即 表明 上 传 的 文件 将 存储 到 Web 应 用 程序 根 目 录 下 的 upload 文件 夹 中 。 


同时 ， 还 使 用 result 元 素 指 定 success 字符 串 所 对 应 的 结果 映射 为 根 目录 下 的 
commonFileUp.jsp 文件 ; input 字符 串 所 对 应 的 结果 映射 为 根 目录 下 的 upload.jsp 文件 。 

(6) 在 WebRoot 目录 下 新 建 uploadjsp 文件 ， 该 文件 用 于 选择 文件 和 预览 文件 ， 主 要 
代码 如 下 所 示 : 


如 上 述 代码 所 示 ， 为 file 类 型 的 input 元 素 添加 onChange 事件 ， 指 向 readFileO) 函 数 。 
在 该 函数 中 ， 首 先 获取 了 选中 的 所 有 file 对 象 ， 并 对 其 进行 循环 遍历 。 在 遍历 的 过 程 中 ， 
对 每 个 file 对 象 的 类 型 大 小 进行 判断 ,检测 其 类 型 是 否 为 图 像 类 型 ,大 小 是 否 小 于 500KB， 
如 果 不 满足 这 些 要 求 ， 则 设置 con 变量 的 值 为 false， 并 跳出 循环 。 和 否则， 使 用 FileReader 
对 象 的 fareadAsDataURLO 对 上 传 的 文件 进行 读 取 操 作 ， 并 绑 定 img 元 素 以 显示 上 传 的 
图 像 。 

在 循环 遍历 完成 之 后 ， 对 con 变量 的 值 进行 判断 ， 如 果 该 值 为 tue， 则 表明 所 选择 的 


文件 都 符合 要 求 ， 使 表单 中 的 提交 按钮 显示 ， 并 在 div 层 中 显示 本 次 可 上 传 的 图 像 数 量 ; 
和 否则， 表明 所 选择 的 文件 中 存在 不 符合 要 求 的 图 像 ， 则 将 表单 中 的 提交 按钮 隐藏 ， 使 之 无 
法 进行 上 传 操作 。 
(7) 在 WebRoot 目录 下 新 建 上 传 成 功 后 的 产品 展示 页 面 commonFileUp.jsp， 在 该 页 面 
中 使 用 Struts 2 标签 库 中 的 iterator 标签 遍历 FileUploadAction 类 中 的 uploadFileName 
属性 ， 显 示 上 传 的 产品 图 像 ， 具 体 代码 如 下 所 示 : 


FileUploadAction 类 中 的 uploadFileName 属性 为 一 个 String 类 型 的 数组 ， 该 数组 中 存 


储 了 用 户 选择 的 所 有 文件 的 名 称 ， 因 此 遍历 该 数组 即 可 获取 数组 中 的 每 个 元 素 。 将 这 些 元 


素 与 img 元 素 绑 定之 后 即 可 显示 图 像 内 容 。 
运行 该 程序 ， 请 求 uploadjsp 文件 ， 选 择 多 个 文件 进行 上 传 。 当 选择 的 图 像 不 符合 要 
和 提交 


运行 该 
求 时 〔 类 型 不 为 图 像 或 者 大 小 大 于 500KB )， 则 显示 符合 要 求 的 图 像 ， 并 将 表单 中 的 提交 
按钮 隐藏 ， 如 图 6-16 所 示 。 
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热线 电话 : 
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图 6-16 选择 了 不 符合 要 求 的 文件 
当选 择 的 文件 类 型 和 大 小 都 符合 要 求 时 ， 则 显示 【确定 上 传 】 按 钮 ， 如 图 6-17 所 示 。 
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图 6-17 选择 的 文件 都 符合 要 求 
单 击 【确定 上 传 】 按 钮 ， 程 序 将 获取 选择 的 所 有 文件 ， 并 将 其 存储 到 服务 器 上 ， 同 时 


在 页 面 中 显示 上 传 的 所 有 文件 信息 ， 如 图 6-18 所 示 。 


6.5 


热线 电话 : 
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图 6-18 文件 上 传 成 功 
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一 、 填 空 题 
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.使 用 file 对 象 的 属性 可 以 获取 不 带路 径 的 文件 名 称 。 

.使 用 代码 可 以 判断 当前 浏览 器 是 否 支 持 FileReader 接口 。 

.在 FileReader 接口 中 ， 方法 用 于 读 取 文 本 文件 。 

.FileReader 接口 中 的 方法 用 于 将 文件 读 取 为 二 进 制 字符 串 。 
.FileError 接口 中 的 错误 常量 表示 由 abort 事件 触发 的 读 取 中 止 异常 。 


二 、 选 择 题 


1 


2 


.下列 不 属于 file 对 象 属性 的 是 。 
A. type 
B. name 
C. lastModifiedDate 
D. path 
.如 下 面 代码 所 示 ， 假 设 需要 获取 用 户 选择 文件 的 数量 ， 应 该 使 用 代码 


A. document.getElementById("fileselect").files 


B. document.getElementById("fileselect").files.count 
C. document.getElementByld("fileselect").files.length 
D. document.getElementById("fileselect"). length 


3. 为 file 类 型 添加 属性 可 以 限制 用 户 选 择 文件 的 类 型 。 
A. accept 
B. ext 
C. name 
D. type 
4. FileReader 接口 的 主要 作用 是 。 
A. 添加 一 个 图 像 


B. 表示 用 户 选择 的 文件 列表 
C. 将 文件 读 入 内 存 ， 并 且 读 取 文 件 中 的 数据 
D. 以 上 皆 是 
5. 调用 abort0 方 法 将 触发 FileReader 接口 的 事件 。 
A. abort 
B. onabort 
C. onerror 
D. onend 


三 、 上 机 练习 


1. 实现 图 像 的 预览 效果 

为 表单 的 fle 类 型 的 input 元 素 添 加 multiple 属性 和 onchange 事件 ， 使 之 可 以 选择 多 
个 文件 (这 里 要 求 只 能 选择 图 像 类 型 的 文件 )。 当 选择 文件 完毕 之 后 ,在 页 面 中 显示 出 本 次 
一 共 选 择 的 文件 数量 ， 并 使 用 FileReader 对 象 的 readAsDataURL() 方 法 读 取 文 件 ， 将 其 与 
img 元 素 绑 定 ， 在 页 面 中 显示 所 有 的 图 像 。 页 面 效 果 如 图 6-19 所 示 。 
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图 6-19 多 个 文件 的 预览 


6.6 “实践 疑难 解答 


6.6.1 HTML 5 中 accept 属性 的 使 用 


右 辆 HTML 5 中 accept 属性 的 使 用 
[有 网 络 课堂 :http://bbs.itzcn.com/thread-19734-1-1.html 


【问题 描述 】: 刚 接触 HTML 5, 现在 我 需要 实现 一 个 只 能 选择 jpg 格式 和 gf 格式 的 文 
件 选择 框 ， 该 如 何 使 用 accept 属性 来 实现 ? accept 属性 可 以 有 多 个 值 吗 ? 

【正确 答案 】: 为 type 属性 为 fle 类 型 的 input 元 素 添 加 accept 属性 可 以 过 滤 选 择 的 文 
件 , 该 属性 的 可 选 值 有 多 个 , 比如: application/pdf、application/poscript、audio/basic、image/gif、 
image/jpeg、image/x-png、text/html 等 。 但 是 accept 属性 并 不 是 每 个 浏览 器 都 支持 ， 存 在 兼 
容 问 题 ， 目 前 Opera 和 Chrome 浏览 器 是 支持 的 ， 而 Firefox 和 正 暂 不 支持 该 属性 。 

如 果 需 要 实现 可 以 选择 多 个 类 型 的 文件 时 ， 则 可 以 为 accept 属性 设置 多 个 值 ， 之 间 使 
用 英文 逗号 “,” 隔 开 即 可 。 例 如 ， 设 置 选择 的 文件 只 允许 为 gif 格式 和 jpg 格式 ， 则 可 以 
使 用 如 下 的 代码 : 


如 果 不 限制 图 像 的 格式 ， 可 以 使 用 如 下 的 代码 : 


accept="image/* "/> 


如 果 不 定义 选择 的 文件 格式 ， 则 打开 的 选择 文件 对 话 框 中 的 【文件 类 型 】 下 拉 列 表 的 
选中 项 为 全 部 文件 〈**)， 如 果 定 义 了 accept 属性 ， 则 打开 的 选择 文件 对 话 框 中 的 【文件 
类 型 】 下 拉 列 表 的 选中 项 会 与 定义 的 一 样 ， 但 是 这 时 候 如 果 想 要 看 其 他 类 型 的 文件 时 ， 可 
以 通过 【文件 类 型 】 下 拉 列 表 框 去 选择 类 型 。 简 单 来 说 ， 使 用 accept 属性 起 到 了 一 个 简单 
的 按照 主观 意愿 筛选 的 作用 ， 同 时 如 果 选 择 的 不 是 sf 格式 或 jpg 格式 的 文件 ，HTML 5 同 
样 可 以 对 这 些 文件 进行 读 取 、 上 传 等 操作 。 


6.6.2 ”使 用 readAsDataURL() 方 法 读 取 文件 时 的 问题 


使 用 readAsDataURL0O 方 法 读 取 文件 时 的 问题 
网 络 课 堂 : http://bbs.itzcn.com/thread-19735-1-1.html 


【问题 描述 }， 从 书 上 看 到 ， 使 用 readAsDataURL0O 方 法 可 以 读 取 选择 文件 ， 并 以 URL 
字符 串 的 形式 存储 ， 于 是 我 编写 了 如 下 代码 : 


这 段 代 码 运行 正常 ， 但 是 在 id 为 imfo 的 div 层 中 显示 的 却 是 许多 看 不 懂 的 字符 ， 如 下 


读 取 的 URL 字符 串 怎 么 会 是 这 样 呢 ? 想 要 实现 将 选择 的 图 像 显示 在 页 面 中 的 效果 ， 
该 如 何 修改 这 段 代码 呢 ? 

【解决 办 法 】 通过 FileReader 接口 中 的 readAsDataURL0O 方 法 ， 可 以 获取 API 异步 读 
取 的 文件 数据 ， 另 存 为 一 串 数据 URL 字符 ， 将 该 URL 绑 定 到 img 元 素 中 即 可 实现 图 片 文 
件 预 览 的 效果 ， 如 下 面 的 代码 所 示 : 


HTMLS 数据 存储 
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随 着 Web 应 用 的 发 展 ， 应 用 开发 者 越 来 越 关注 的 一 个 问题 是 : 如 何 更 好 地 在 客户 端 存 
储 数据 。 由 于 cookies 存储 机 制 有 限制 保存 数据 空间 大 小 、 数 据 保密 性 差 、 代 码 操纵 复杂 
等 缺点 ， 所 示 HTML 5 中 不 再 使 用 它 。HTML 5 中 增加 了 两 种 全 新 的 数据 存储 方式 : Web 
Storage 和 Web SQL Database。 前 者 可 以 用 于 临时 或 永久 保存 客户 端的 少量 数据 ; 后 者 是 客 
户 端 本 地 化 的 一 套数 据 库 系统 ， 通 过 这 套数 据 系统 ， 可 以 将 大 量 的 数据 保存 在 客户 端 ， 而 
无 须 与 服务 器 交互 ， 极 大 地 减轻 了 服务 端的 压力 ， 加 快 了 其 他 页 面 的 浏览 速度 。 

本 章 将 详细 介绍 在 HTML 5 中 这 两 种 数据 存储 方式 及 其 使 用 方法 和 技巧 。 

本 章 学 习 要 点 : 

> 掌握 Web Storage 的 基本 概念 
了 解 sessionStorage 和 localStorage 
掌握 localStorage 与 sessionStorage 的 使 用 方法 
掌握 本 地 数据 库 的 基本 概念 
熟练 创建 与 打开 数据 库 
熟练 掌握 本 地 数据 库 的 增 、 删 、 改 、 查 
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7.1 Web Storage 存储 


在 HIML 5 中 除了 Canvas 元 素 之 外 ， 另 一 个 新 增 的 非常 重要 的 功能 是 在 客户 端 本 地 
保存 数据 的 Web Storage 功能 。 由 于 Web Storage API 可 以 区 分 会 话 数据 与 长 期 数据 , 因此 ， 
相应 的 API 类 型 分 为 两 种 : 

口 sessionStorage 保存 会 话 数据 。 

口 localStorage 在 客户 端 长 期 保存 数据 。 

由 于 Web Storage API 可 以 将 客户 端的 数据 分 类 型 进行 存储 , 使 它 在 运用 上 更 加 优越 于 
传统 的 、 单 一 的 Cookie 方式 。 下 面 简要 介绍 这 两 种 类 型 的 数据 存储 方式 。 


7.1.1 sessionStorage 对 象 


在 页 面 进行 数据 存储 的 过 程 中 , 使 用 sessionStorage 对 象 保 存 的 数据 时 间 非 常 短暂 ， 因 
为 该 数据 实质 上 是 被 保存 在 session 对 象 中 的 。sessionStorage 对 象 主要 是 针对 一 个 session 
的 数据 存储 。 当 用 户 关闭 浏览 器 窗口 后 ， 数 据 就 会 被 删除 。 它 适用 于 存储 短期 的 数据 ， 在 


同 域 中 无 法 共享 ， 并 且 在 用 户 关 闭 窗 口 后 ， 数 据 将 被 清除 。 

sessionStorage 对 象 最 常用 的 方法 如 下 所 示 : 

口 。 setItem (keyvalue) 参数 key 表示 被 保存 内 容 的 键 , 参数 value 表示 被 保存 内 容 的 值 。 

口 getItem (key) ”获取 指定 key 本 地 存储 的 值 ， 如 果 不 存 在 ， 则 返回 一 个 null 值 。 

口 removelItem (key) ”删除 指定 key 本 地 存储 的 值 。 

口 elear0 清除 localStorage 对 象 中 所 有 的 数据 。 

【实践 案例 7-1】 

下 面 的 例子 通过 使 用 sessionStorage 对 象 实现 对 用 户 访问 页 面 的 次 数 进行 计数 。 代 码 如 
下 所 示 : 


上 述 代 码 中 ， 当 访问 该 页 面 时 首先 调用 函数 supportSessionStorage() 检 测 浏览 器 是 否 支 
持 sessionStorage 对 象 ， 如 果 浏 览 器 支持 该 对 象 ， 则 使 用 sessionStorage.pagecount 获得 用 户 
访问 页 面 的 次 数 并 且 每 刷新 一 次 页 面 都 会 将 sessionStorage.pagecount 的 值 加 1。 函 数 
supportSessionStorage() 的 代码 如 下 所 示 : 


在 上 述 的 JavaScript 代码 中 ,如 果 浏览 器 支持 该 特性 , 那么 全 局 对 象 window 上 会 有 一 
个 sessionStorage 的 属性 ， 反 之 ， 如 果 浏览 器 不 支持 该 特性 ， 那 么 该 属性 值 为 ndefined。 


上 述 代码 运行 结果 如 图 7-1 所 示 ， 重 新 打开 浏览 器 访问 此 页 面 ， 结 果 和 图 7-1 显示 的 
结果 一 样 。 
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i 
刷新 页 面 人 看 到 计数 器 在 增长 
请 关闭 浏览 器 窗口 ， 然 后 再 重新 访问 ， 观 察 计数 器 有 什么 变化。 


图 7-1 使 用 sessionStorage 对 用 户 访问 次 数 计数 


7.1.2 localStorage 对 象 


使 用 sessionStorage 对 象 只 能 保存 用 户 临时 的 会 话 数据 , 关闭 浏览 器 后 ,这 些 数据 都 将 
丢失 。 因 此 ， 如 果 需 要 长 期 在 客户 端 保存 数据 ， 不 建议 使 用 sessionStorage 对 象 ， 而 是 使 用 
0 中 新 提供 的 localStorage 对 象 。 使 用 该 对 象 可 以 将 数据 长 期 保存 在 客户 端 ， 直 至 人 
工 清除 为 止 。 

localStorage 对 象 同 sessionStorage 对 象 一 样 ， 最 常用 的 方法 有 setItem(key,value)、 
getItem(key)、removeItem(key)、clear0， 在 这 里 就 不 再 详细 介绍 这 些 方 法 。 

【实践 案例 7-2】 

下 面 通过 对 用 户 访问 页 面 的 次 数 进 行 计数 的 例子 来 比较 localStorage 对 象 与 
sessionStorage 对 象 的 不 同 。 代 码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


</body> 


上 述 代 码 的 执行 结果 如 图 7-2 所 示 。 


C D file:///Cc:/Docunentsy20andy20Settings/AdninistratcY7 三 
localStorage 页 面 访问 次 数 ，1 次 。 
刷新 页 面 会 看 到 计数 器 在 增长 。 
请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 观 察 计数 器 有 什么 变化 。 


图 7-2 ”使 用 localStorage 对 用 户 访问 次 数 计数 
重新 打开 浏览 器 访问 此 页 面 ， 结 果 如 图 7-3 所 示 。 
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localStorage 页 面 访问 次 数 ，5 次 。 


刷新 页 面 会 看 到 计数 器 在 增长 。 
请 关闭 浏览 器 窗口 ， 然 后 再 试 一 次 ， 观 察 计 数 器 有 什么 变化 。 


图 7-3 重新 访问 页 面 执行 结果 


7.2 数据 操作 


使 用 localStorage 对 象 和 sessionStorage 对 象 可 以 进行 写 入 数据 、 读 取 数 据 以 及 清空 数 
据 等 操作 。 由 于 localStorage 对 象 和 sessionStorage 对 象 的 方法 是 一 样 的 ， 本 节 就 以 
localStorage 对 象 为 例 ， 讲 解 如 何 写 入 数据 、 读 取 数 据 以 及 清空 数据 。 

7.2.1 保存 数据 


在 保存 数据 时 ， 需 要 调用 对 象 中 的 setItem0 方 法 ， 其 调用 格式 如 下 所 示 : 


localStorage.setItem(key,value) 


其 中 ,参数 key 表示 被 保存 内 容 的 键 名 , 参数 value 表示 被 保存 的 键 值 . 在 使 用 setItemO 
方法 保存 数据 时 ， 对 应 格式 为 ( 键 名 ， 键 值 )。 一旦 键 名 设置 成 功 ， 则 不 允许 修改 ， 也 不 能 
重复 ; 如 果 没 有 重复 的 键 名 ， 那么， 只 能 修改 对 应 的 键 值 ， 即 用 新 的 键 值 取代 原 有 的 键 值 。 

【实践 案例 7-3】 

以 下 实例 使 用 localStorage 对 象 的 setItem0 方 法 实现 存储 用 户 的 姓名 和 年 龄 的 功能 , 具 


体 代码 如 下 所 示 : 


ER 


上 段 代 码 使 用 localStorage 对 象 的 setItem() 方 法 写 入 数据 。 如 果 不 使 用 setItem() 方 法 ， 
可 以 使 用 localStorage[key]=value 或 者 直接 使 用 localStorage key=value。 这 两 种 写 入 方法 的 
效果 和 setItem0 的 效果 一 样 。 如 下 所 示 : 


如 果 用 户 存储 的 数据 已 经 达到 浏览 器 指定 的 限额 ， 超 过 浏览 器 的 存储 量 ， 可 以 抛 出 一 
个 代码 异常 ， 具 体 代 码 如 下 所 示 : 


上 段 代 码 使 用 try/catch 代码 块 捕 提 异常, 如 果 浏览 器 的 存储 量 超标 , 会 立刻 抛 出 异常 ， 
提示 用 户 无 法 存储 数据 。 所 以 ， 还 有 一 个 更 好 的 方法 : 用 户 在 存储 重要 的 数据 前 ， 可 以 使 
用 上 面 代码 测试 是 否 超出 分 配额 。 


7.2.2 ” 读 取 数据 


使 用 localStorage 对 象 中 的 setItem0 方 法 保存 数据 后 ， 如 果 需 要 读 取 被 保存 的 数据 ， 可 
以 调用 localStorage 对 象 中 getItem() 方 法 ， 其 调用 格式 如 下 所 示 : 


其 中 ， 参 数 key 表示 设置 保存 时 被 保存 内 容 的 键 名 ， 该 方法 将 返回 一 个 指定 键 名 对 应 
的 键 值 ， 如 果 不 存在 ， 则 返回 一 个 null 值 。 

【实践 案例 7-4】 

以 下 实例 新 建 一 个 登录 页 面 ， 用 户 在 文本 框 中 输入 用 户 名 与 密码 ， 单 击 【登录 】 按 钮 
后 , 将 使 用 localStorage 对 象 保 存 登录 时 的 用 户 名 。 当 重新 在 浏览 器 中 打开 该 页 面 时 ， 经 过 
保存 的 用 户 名 和 密码 数据 将 分 别 显示 在 相应 的 文本 框 中 。 

在 Dreamweaver CS5 中 新 建 一 个 HIML 页 面 login.html， 代 码 如 下 所 示 : 


在 login html 页 面 中 导入 一 个 JavaScript 文件 loginjs， 其 中 自 定义 两 个 函数 ， 分 别 在 
页 面 加 载 和 单 击 【 登 录 】 按 钮 时 调用 。 实 现 的 代码 如 下 所 示 : 


本 实例 中 页 面 在 加 载 时 ， 将 调用 自 定义 的 函数 pageload0。 该 函数 先 通过 localStorage 
对 象 中 的 getItem() 方 法 获取 指定 键 名 的 键 值 ， 并 保存 在 变量 中 。 如 果 不 为 室 ， 则 将 该 变量 


赋值 给 相应 的 文本 框 ， 用 户 下 次 登录 时 不 用 再 次 输入 ， 以 方便 用 户 的 操作 。 
用 户 单 击 【 登 录 】 按 钮 时 ， 将 触发 onclick 事件 ， 在 该 事件 中 调用 另外 一 个 自 定义 的 函数 
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btmlogin click0， 该 函数 首先 分 别 通过 两 个 变量 保存 在 文本 框 中 输出 的 姓名 和 密码 ， 然 后 调用 
localStorage 对 象 的 setItem0 方 法 ， 将 姓名 作为 键 名 “keyname” 的 键 值 进 行 保存 。 
尽管 使 用 localStorage 对 象 可 以 将 数据 长 期 保存 在 客户 端 ,但 在 跨 浏 览 器 读 
取 数 据 时 ， 被 保存 的 数据 不 可 共用 。 即 每 一 个 浏览 器 只 能 读 取 各 自 浏览 器 
中 保存 的 数据 ， 不 能 访问 其 他 浏览 器 中 保存 的 数据 。 D 


上 述 页 面 在 浏览 器 中 执行 的 页 面 效 果 如 图 7-4 所 示 。 


图 7-4 使 用 localStorage 保存 登录 用 户 名 和 密码 


在 文本 框 中 输入 姓名 和 密码 ， 然 后 单 击 【 登 录 】 按 钮 ， 重 新 打开 浏览 器 访问 该 页 面 ， 
保存 的 姓名 和 密码 将 分 别 显示 在 相应 的 文本 框 中 ， 效 果 如 图 7-5 所 示 。 


图 7-5 使 用 localStorage 读 取 登 录用 户 名 和 密码 


7.2.3 ”清空 数据 


如 果 要 删除 某 个 键 名 对 应 的 记录 ,只 需要 调用 localStorage 对 象 中 的 removeItem() 方 法 ， 
传递 一 个 保存 数据 的 键 名 即 可 删除 对 应 的 保存 数据 。 但 是 ， 有 时 保存 数据 很 多 ， 如 果 使 
removeltem() 方 法 逐条 删除 相对 麻烦 。 此 时 ， 可 以 调用 localStorage 对 象 中 的 另 一 个 方法 
clear0， 该 方法 的 功能 是 清空 全 部 localStorage 对 象 保存 的 数据 ， 其 调用 格式 如 下 所 示 : 


该 方法 是 一 个 无 参数 方法 ， 表 示 清 空 全 部 的 数据 。 一 旦 使 用 localStorage 对 象 保存 了 
数据 库 ， 用 户 就 可 以 在 浏览 器 中 打开 相应 的 代码 调试 工具 ， 查 看 每 条 数据 对 应 的 键 名 与 键 
值 。 执 行 删除 或 清空 操作 后 ， 其 对 应 的 数据 也 会 发 生变 化 。 

【实践 案例 7-5】 

以 下 实例 中 ， 在 新 建 的 页 面 中 添加 两 个 按钮 ， 使 用 localStorage 对 象 实现 保存 5 条 顺 
序 记 录 和 清空 所 有 的 localStorage 对 象 保 存 的 记录 的 功能 。 无 论 是 增加 还 是 清空 数据 , 都 可 
以 在 浏览 器 的 调试 工具 中 查看 其 变化 过 程 。 

在 Dreamweaver CS5 中 新 建 一 个 HTML 页 面 clear.html， 代 码 如 下 所 示 


在 clearhtml 页 面 导入 一 个 JavaScript 文件 clearjs， 其 中 自 定义 两 个 函数 ， 在 单 击 【 添 
加 】 和 【清空 】 按 钮 时 调用 ， 其 实现 的 代码 如 下 所 示 : 


在 本 实例 中 ， 当 用 户 单 击 【 添 加 】 按 钮 时 ， 将 使 用 循环 的 方式 ， 按 执行 顺序 保存 5 条 数 


据 记 录 ， 其 键 名 为 “strkeyname ”与 变量 intI 的 连接 ， 即 “strkeyname0” “strkeynamel ”等 。 
对 应 键 值 为 “strkeyvalue” 与 变量 intI 的 连接 ， 即 “strkeyvalue0”、“strkeyvaluel” 等 。 这 
些 被 localStorage 对 象 保存 的 数据 记录 ， 可 以 在 浏览 器 中 通过 右 击 选择 【审查 元 素 】 选 项 ， 
单 击 Resources 选项 卡 进行 查看 ， 效 果 如 图 7-6 所 示 。 

当 用 户 单 击 【 清 空 】 按 钮 时 ， 调 用 自 定义 函数 bmdelete_ckick()。 在 该 函数 中 ， 执 行 
localStorage 对 象 中 的 clear0 方 法 ， 清 空 所 有 localStorage 对 象 保存 的 数据 ， 效 果 如 图 7-7 
所 示 。 
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7.2.4 遍历 数据 


为 了 查看 localStorage 对 象 保存 的 全 部 数据 信息 ， 通 常 要 遍历 这 些 数据 。 在 遍历 过 程 
中 ,需要 访问 localStorage 对 象 的 另外 两 个 属性 : length 和 key。 前 者 表示 localStorage 对 象 
中 保存 数据 的 总 量 ; 后 者 表示 保存 数据 时 的 键 名 项 , 该 属性 常 与 索引 号 (index) 配合 使 用 ， 
表示 第 几 条 键 名 对 应 的 数据 记录 。 其 中 ， 索 引号 以 0 值 开始 ， 如 果 取 第 2 条 键 名 对 应 的 数 
据 ，index 值 应 该 为 1。 

【实践 案例 7-6】 

以 下 实例 在 创建 的 页 面 中 通过 遍历 的 方式 获取 localStorage 对 象 保存 的 全 部 发 帖 记录 。 
在 文本 框 中 输入 帖子 内 容 ， 单 击 【 发 表 】 按 钮 后 ， 可 以 通过 localStorage 对 象 保存 输入 的 数 
据 ， 并 实时 显示 在 页 面 中 。 

在 Dreamweaver CS5 中 新 建 一 个 HTML 页 面 tie.html， 代 码 如 下 所 示 : 


在 上 述 代 码 中 导入 一 个 JavaScript 文件 tiejs， 其 中 自 定义 多 个 函数 ， 在 页 面 加 载 和 单 
击 【 发 表 】 按 钮 时 调用 ， 其 实现 的 代码 如 下 所 示 : 
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$$ ("message") .innerHTML=strHTML; 
} 
// 生 成 指定 长 度 的 随机 数 
function RetRndNum(n){ 
Var strRnd="" 
for (var intI=0;intI<n;intI++) { 
strRnd+=Math.floor (Math.random()*10); 221) 
I 
return strRnd; 
} 


在 本 实例 中 ， 当 页 面 加 载 时 调用 一 个 自 定义 的 函数 getlocalData0。 在 该 函数 中 根据 
localStorage 对 象 的 length 值 , 使 用 for 语句 遍历 localStorage 对 象 保存 的 全 部 数据 。 在 遍历 
过 程 中 ， 通 过 “strkey” 变 量 保存 每 次 遍历 的 键 名 。 获取 键 名 后 ， 为 了 只 获取 localStorage 
对 象 中 保存 的 帖子 数据 ， 检 查 键 名 前 3 个 字符 是 否 为 “cnt”， 如 果 是 ， 则 通过 getItem0) 方 
法 获取 键 名 对 应 的 键 值 ， 并 保存 在 变量 “strval” 中 。 由 于 键 值 是 :由 “, ”组 成 的 字符 串 ， 
因此 ， 先 通过 数组 strarr 保存 分 割 后 的 各 项 数值 ， 然 后 通过 数组 下 标 将 各 项 获取 的 内 容 显 
示 在 页 面 中 。 

用 户 在 页 面 中 输入 帖子 内 容 后 , 单 击 [ 发表] 按钮 时 , 将 调用 自 定义 函数 btnadd_click()， 
在 该 函数 中 先 获 取 帖 子 内 容 并 保存 在 变量 “strcontent” 中 。 为 了 使 保存 内 容 的 键 名 不 重复 ， 
0 在 生成 键 名 时 调用 函数 RetRndNum()， 随 机 生成 一 个 4 位 数字 ， 并 与 字 
符 “cnt” 组 合成 新 的 字符 串 ， 保 存在 变量 “strkey” 中 。 为 了 保存 更 多 的 数据 信息 ， 保 存 
ee strcontent” 通 过 “, ”与 时 间 数 据 组 合 ;成 新 的 字符 串 ， 保存 在 变量 “strvalue” 
中 。 最 后 ， 通 过 setItem() 方 法 将 变量 “ “strkey” 与 “strvalue ”分别 作为 键 名 与 键 值 保存 在 
localStorage 对 象 中 。 

该 页 面 在 浏览 器 中 执行 的 页 面 效果 如 图 7-8 所 示 。 


图 7-8 遍历 localStorage 对 象 保 存 的 全 部 数据 


7.2.5 使 用 JSON 对 象 存 取 数 据 


为 了 解决 处 理 相对 复杂 、 拓 展 性 差 、 数 据 结构 不 合理 的 问题 ， 在 HIML 5 中 可 以 通过 


localStorage 数据 与 JSON 对 象 的 转换 ， 快 速 实现 存储 更 多 数据 的 功能 。 
如 果 要 将 localStorage 数据 转 成 为 JSON 对 象 ， 需 要 调用 JSON 对 象 的 parse() 方 法 ， 调 
用 格式 如 下 所 示 : 


其 中 ， 参 数 data 表示 localStorage 对 象 获取 的 数据 ， 调 用 该 方法 将 返回 一 个 装载 data 
数据 的 JSON 对 象 。 

除 此 之 外 , 还 可 以 通过 stringify0 方 法 , 将 一 个 实体 对 象 转换 为 JSON 格式 的 文本 数据 ， 
调用 格式 如 下 所 示 : 


其 中 ， 参 数 obj 表示 一 个 任意 的 实体 对 象 ， 调 用 该 方法 将 返回 一 个 由 实体 对 象 转换 成 
JSON 格式 的 文本 数据 集 。 

【实践 案例 7-7】 

以 下 实例 中 ， 首 先 收集 一 组 用 户 输入 信息 ， 然 后 创建 一 个 实体 对 象 来 封装 这 些 信 息 ， 
之 后 用 一 个 JSON 字符 串 来 表示 这 个 实体 对 象 ,然后 把 JSON 字符 串 存放 在 localStorage 中 。 
之 后 ， 让 用 户 检索 名 称 ， 用 户 名 称 为 key 从 localStorage 取得 对 应 的 json 字符 串 ， 然 后 解 
析 JSON 字符 串 到 Object 对 象 ， 把 相关 信息 依次 从 这 个 Object 对 象 中 提取 出 来 ， 然 后 构造 
HTML 文本 ， 最 后 输出 在 指定 位 置 。 

在 Dreamweaver CS5 中 新 建 一 个 HTML 页 面 json.html， 代 码 如 下 所 示 : 


在 上 述 代码 中 导入 一 个 JavaScript 文件 jsonjs， 其 中 自 定义 两 个 函数 ， 在 单 击 【 保 存 】 
按钮 和 【检索 】 按 钮 时 调用 ， 其 实现 的 代码 如 下 所 示 : 


上 述 代码 中 saveStorageO 函 数 用 来 创建 一 个 js 对 象 ,用 于 存放 当前 从 表单 获得 的 数据 ， 
然后 创建 一 个 JSON 对 象 ， 让 其 对 应 刚才 创建 的 对 象 的 字符 串 数据 形式 ， 把 JSON 对 象 存 
放 到 localStorage 中 ，key 为 用 户 输 入 的 用 户 名 ,value 为 这 个 JSON 字符 串 。findStorage(id) 
函数 以 检索 的 名 字 为 key, 来 查找 localStorage， 得 到 了 JSON 字符 串 ， 然 后 解析 这 个 JSON 
字符 串 得 到 Object 对 象 ， 最 后 在 页 面 上 显示 出 来 。 执 行 结果 如 图 7-9 所 示 。 


7-19 使 用 JSON 对 象 存储 数据 


7.3 ” HTML 5 数据 库 


前 面 介绍 了 使 用 localStorage 对 象 和 sessionStorage 对 象 本 地 存储 数据 ， 虽 然 这 种 方法 
目前 可 以 在 许多 主流 的 浏览 器 、 平 台 与 设备 上 实现 。 但 是 ，Web 存储 的 API 提供 的 SMB 
存储 和 简单 的 键 值 对 是 远 远 不 够 的 ， 键 值 对 的 存储 也 带 来 诸多 不 便 。 如 果 用 户 要 存储 大 量 
的 数据 ， 并 且 数 据 之 间 的 关系 非常 复杂 ， 那 么 这 时 用 户 就 需要 成 熟 的 数据 库 来 满足 自己 的 
要 求 。 本 节 将 介绍 HTML 5 中 的 Web SQL 数据 库 。 

Web SQL 数据 库 (Web SQL DataBase，WebDB)， 它 内 置 SQLite 数据 库 ， 对 数据 库 的 
操作 可 以 通过 调用 executeSql0 方 法 实现 ， 它 允许 使 用 JavaScript 代码 控制 数据 库 的 操作 。 
接 下 来 详细 介绍 使 用 WebDB 实现 本 地 存储 的 方法 。 


7.3.1 创建 与 打开 数据 库 


Web SQL 数据 库 可 以 实现 数据 的 本 地 存储 ， 它 提供 了 关系 数据 库 的 基本 功能 ， 可 以 存 
储 页 面 中 交互 的 \ 复 杂 的 数据 。 它 既 可 以 保存 数据 ,也 能 缓存 从 服务 器 获取 的 数据 。 Web SQL 
数据 库 通 过 事务 驱动 ， 实 现 对 数据 的 管理 。 因 此 ， 它 可 以 支持 多 浏览 器 的 并 发 操作 ， 而 不 
发 生存 储 时 的 冲突 。 

如 果 要 通过 Web SQL 数据 库 进 行 本 地 数据 的 存储 ， 首 先 需要 创建 或 打开 一 个 数据 库 ， 
使 用 的 方法 为 openDatabase0， 该 方法 的 使 用 如 下 所 示 : 


其 中 ,参数 DBName 表示 数据 库 名 称 ; 参数 DBVersion 表示 版 本 号 ; 参数 DBDescribe 
表示 对 数据 库 的 描述 ， 参 数 DBSize 表示 数据 库 的 大 小 ， 单 位 为 字 节 。 如 果 是 2MB， 必 须 
写成 2*1024*1024; 参数 Callback() 表 示 创 建 或 打开 数据 库 成 功 后 执行 的 一 个 回调 函数 。 

调用 该 方法 时 如 果 指定 的 数据 库 名 存在 ， 则 打开 该 数据 库 ， 否 则 新 创建 一 个 指定 名 称 
的 空 数据 库 。 

【实践 案例 7-8】 

在 Dreamweaver CS5 中 创建 一 个 新 页 面 ， 添 加 “创建 数据 库 ” 按 钮 ， 实 现 创建 数据 库 
的 功能 ， 添 加 “测试 连接 ”按钮 ， 测 试 数据 库 连 接 是 否 成 功 。 具 体 代码 如 下 所 示 : 


在 上 述 代 码 中 导入 一 个 JavaScript 文件 dbjs， 其 中 自 定义 两 个 函数 ， 分 别 在 单 击 【 创 
建 数据 库 】 与 【测试 数据 库 连 接 】 按 钮 时 调用 ， 其 实现 的 代码 如 下 所 示 : 


在 本 实例 的 JavaScript 代码 中 ， 首 先 定义 了 一 个 全 局 性 变量 “db”， 用 于 保存 打开 的 数 
据 库 对 象 。 当 用 户 单 击 【 创 建 数据 库 】 按 钮 时 ， 调 用 自 定义 的 函数 btncreatedb_click0， 在 
该 函数 中 ， 创 建 或 打开 一 个 名 为 “studentDB”， 版 本 号 为 “2.0” 的 2MB 的 数据 库 对 象 ; 
如 果 创 建成 功 ， 则 执行 回调 函数 ， 在 回调 函数 中 显示 执行 成 功 的 提示 信息 。 

单 击 【 测 试 数据 库 连接 】 按 钮 时 ， 调 用 另外 一 个 自 定义 的 函数 btntestconn_click0， 在 
该 函数 中 ， 直 接 根据 全 局 变量 “db” 的 状态 ， 显 示 与 数据 库 的 连接 是 否 正常 的 提示 信息 。 

上 面 代码 的 运行 效果 如 图 7-10、 图 7-11 所 示 。 


图 7-10 创建 数据 库 图 7-11 测试 数据 库 连 接 


7.3.2 执行 SQL 语句 


当 创 建 或 打开 数据 库 后 ， 就 可 以 使 用 数据 库 对 象 中 的 transaction 方法 执行 事务 处 理 。 
使 用 事务 处 理 ， 可 以 防止 在 对 数据 库 进 行 访 问 及 执行 有 关 操作 的 时 候 受到 外 界 打扰 。 每 一 
个 事务 处 理 请 求 都 作为 数据 库 的 独立 操作 ， 这 可 以 有 效 地 避免 在 处 理 数据 时 发 生 冲 突 。 其 
调用 的 语法 格式 如 下 所 示 : 


其 中 ， 参 数 TransCallback 表示 事务 回调 函数 ， 可 以 写 入 需要 执行 的 SQL 语句 ， 参数 
ErrorCallback 表示 执行 SQL 语句 出 错时 的 回调 函数 ， 参 数 SuccessCallback 表示 执行 SQL 
语句 成 功 时 的 回调 函数 。 

【实践 案例 7-9】 

在 Dreamweaver CS5 中 创建 一 个 新 页 面 ， 添 加 一 个 “执行 事务 ”按钮 ， 当 用 户 单 击 该 
按钮 时 ， 执 行 一 条 新 建 名 为 student 表 的 SQL 语句 ， 代 码 如 下 所 示 : 


在 上 述 代 码 中 导入 一 个 JavaScript 文件 ranjs， 其 中 自 定义 一 个 函数 ， 在 单 击 【 执 行事 
务 】 按 钮 时 调用 ， 其 实现 的 代码 如 下 所 示 : 


上 述 代 码 中 ， 函 数 tncreatetran_click0 首 先 使 用 openDatabase() 方 法 打开 或 者 创建 一 个 
名 为 “studentDB” 的 数据 库 ， 如 果 执 行 成 功 ， 创 建 一 个 SQL 语句 ， 这 个 SQL 语句 的 功能 
是 : 如 果 不 存在 表 “student”, 则 新 建 一 个 名 称 为 “student” 的 表 , 该 表 包 含 四 个 字段 :“id”、 
“name”、“age”、“score”。 其 中 ,字段 “id” 为 主键 ,不 允许 重复 ,“name” 字 段 为 字符 型 ， 
“age” 和 “score” 字 段 为 int 类 型 。 

然后 ， 使 用 transaction() 方 法 执行 事务 ， 在 该 方法 的 第 一 个 函数 中 调用 executeSql0 方 
法 ， 执 行 对 应 的 sql 语句 。 最 后 ， 将 事务 执行 过 程 中 的 结果 通过 transaction 方法 中 第 二 个 


与 第 三 个 回调 函数 显示 在 页 面 中 。 


图 7-12 执行 事务 成 功 图 7-13 执行 事务 出 错 


既然 可 以 通过 事务 处 理 的 方式 执行 SQL 语句 创建 新 表 , 那么 , 如 果 想 要 给 新 建 的 表 插 
入 记录 ， 同 样 也 可 以 通过 执行 相应 的 SQL 语句 来 实现 。 此 时 需要 调用 一 个 执行 SQL 语句 
的 方法 executeSql， 其 调用 的 格式 如 下 所 示 : 


其 中 ,参数 sqlString 表示 需要 执行 的 SQL 语句 ;参数 Arguments 表示 语句 需要 的 实 参 ; 
参数 SuccessCallback 表示 SQL 语句 执行 成 功 时 的 回调 函数 ， 参 数 ErrorCallback 表示 SQL 
语句 执行 出 错时 的 回调 函数 。 

例如 ，executeSql() 方 法 的 正确 使 用 方法 如 下 : 


形 参 “? ”的 数量 必须 与 后 面 的 实 参数 量 完 全 对 应 ， 如 果 SQL 语句 中 没有 形 参 “? ”， 
则 第 二 个 参数 中 不 允许 用 户 有 任何 内 容 出 错 ， 和 否则 执行 SQL 语句 时 将 会 报错 。 

下 面 通过 实例 介绍 使 用 executeSql() 方 法 插入 记录 的 过 程 。 

【实践 案例 7-10】 

在 Dreamweaver CS5 中 新 建 一 个 HIML 页 面 , 用 户 可 以 在 页 面 中 输入 姓名 、 年 龄 、 总 
分 值 ， 单 击 【提交 】 按 钮 ， 将 输入 的 数据 信息 通过 调用 executeSql0 方 法 插入 到 student 表 
中 ， 并 将 执行 结果 返回 显示 在 页 面 中 。 具 体 实现 代码 如 下 所 示 : 


上 段 代 码 中 ， 用 户 在 页 面 输入 学 生 学 号 、 姓 名 、 成 绩 等 信息 后 ， 单 击 【 提 交 】 按 钮 ， 
提交 用 户 的 信息 ， 触 发 按钮 的 click 事件 ， 调 用 函数 addstudent0 函 数 。JavaScript 的 具体 代 
人 码 如 下 所 示 : 


当 用 户 输入 学 生 学 号 、 学 生 姓名 等 信息 后 , 单 击 【 提 交 】 按钮 ， 调 用 函数 addstudent0， 
该 函数 首先 使 用 openDatabase0 方 法 打开 或 者 创建 一 个 名 称 为 “studentDB”、 版 本 号 为 “2.0” 
的 数据 库 ， 打 开 或 创建 数据 库 成 功 后 ， 定 义 一 条 SQL 语句 ， 该 SQL 语句 的 功能 是 : 向 数 
据 表 “student” 中 添加 一 条 学 生 信息 记录 。 如 果 不 存在 “student” 表 或 表 名 称 书写 错误 或 
SQL 语句 语法 错误 ， 则 会 提示 出 现 错误 信息 。 

上 述 代码 的 运行 效果 如 图 7-14、 图 7-15 所 示 。 


图 7-14 添加 学 生 信息 记录 成 功 图 7-15 添加 学 生 信息 记录 失败 


7.3.3 ”数据 管理 


上 一 节 介 绍 了 如 何 使 用 executeSql() 方 法 执行 SQL 语句 ， 从 而 实现 了 向 Web SQL 数据 
库 中 “student” 表 中 插入 数据 的 过 程 。 其 实 ,只 要 符合 规范 的 SQL 语 句 都 可 以 通过 executeSql0 


方法 执行 ， 例 如 “select”、“update”、 “delete” 组 成 的 SQL 语句 ， 都 可 以 带 形 参 “? ” 通 
过 executeSql(0 方 法 执行 。 本 节 在 对 上 一 节 的 示例 上 进行 扩展 , 实现 学 生 信息 的 增加 、 删除 、 
修改 、 查 询 功 能 ， 从 而 实现 对 数据 管理 的 功能 。 


【实践 案例 7-11】 
在 上 节 示 例 的 基础 上 ， 增 加 以 列表 展示 学 生 信 息 的 功能 ， 同 时 ， 还 要 实现 添加 学 生 信 


息 的 功能 ， 并 且 能 够 根据 学 号 查询 学 生 记录 。 最 终 能 够 单 击 【 编 辑 】 链 接 更 新 记录 ， 单 击 
【删除 】 链 接 删 除 记录 ， 实 现 对 学 生 数 据 的 全 面 管理 。 
在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 页 面 的 代码 如 下 所 示 : 


上 段 代码 在 上 一 节 实 例 的 基础 上 增加 了 一 个 【修改 】 按 钮 ， 为 了 实现 修改 学 生 信息 的 


功能 。 
在 本 例 中 ， 为 了 根据 学 号 查询 数据 或 显示 全 部 学 生 数 据 ， 当 页 面 加 载 时 ， 调 用 自 定义 
函数 getWebData0， 根 据 该 函数 形 参 s 的 值 编写 不 同 的 查询 语句 。 具 体 实现 代码 如 下 所 示 : 


如 果 s 值 为 0， 表 示 需 要 获取 全 部 数据 ， 即 sql 语句 为 : 
| select * 在 om Student Where idc 
如 果 s 值 不 为 0， 表 示 需 要 根据 传 回 的 s 值 获取 对 应 的 数据 ， 即 sq 语 名 为: 
select * fronstudent Where it 


其 中 ， 形 参 “? ”在 调用 executeSql() 方 法 执行 SQL 语句 时 ， 由 s 值 替换 。 当 SQL 语 
句 中 有 查询 字符 “select” 时 ， 如 果 执 行 成 功 ， 则 可 以 通过 访问 成 功 回调 函数 中 “rs” 对 象 
的 “row.length” 与 “row.item” 属 性 , 遍历 整个 “rs” 数 据 集 对 象 , 然后 采用 “row.item(index). 
字段 名 ”的 方式 获取 每 一 条 记录 中 的 各 字段 内 容 ， 并 组 成 一 个 列表 显示 在 页 面 中 。 

在 展示 数据 的 列表 时 ， 单 击 【 编 辑 】 链 接 ， 将 调用 自 定义 函数 editdata0， 该 函数 将 根 
据 传 回 的 学 号 值 编写 一 个 SQL 语句 ， 执 行 成 功 后 ， 采 用 “rs.rows.item(0).id” 的 方式 将 获 
取 的 数值 赋 给 页 面 中 对 应 的 文本 框 ， 具 体 实现 代码 如 下 所 示 : 


当 单 击 【修改 】 按 钮 时 ， 调 用 一 个 自 定义 的 函数 btnupd_click0， 代 码 如 下 所 :; 


在 上 述 代码 中 ， 编 写 一 个 通过 学 号 更 新 记录 的 sql 语句 : 


在 调用 executeSq10 方 法 执行 SQI 语句 时 , 将 获取 页 面 中 输入 的 各 项 信息 作为 实 参 , 按 
顺序 依次 传递 给 sql 语句 中 的 形 参 ， 实 现 按 学 号 更 新 数据 的 功能 。 


在 展示 数据 的 列表 中 ， 单 击 【删除 】 链 接 时 ， 调 用 自 定义 函数 bmdel_clickO0， 该 函数 
的 具体 实现 代码 如 下 : 


在 调用 上 述 函数 时 ， 该 函数 将 根据 传 回 的 学 号 值 编 写 一 个 SQL 语句 : 


在 调用 executeSql( 方 法 执行 SQL 语句 时 , 将 获 人 代 
取 的 学 号 值 作 为 实 参 ， 传递 给 SQL 语句 中 的 形 参 ， 富 言 G 5 flle:1//e:/ 新 建文 件 R%20(3)/frienananager,htnl 。 十 | 
实现 按 学 号 删除 数据 的 功能 。 其 执行 结果 如 图 7-16 "a 
所 示 。 


7.4 项 目 案例 : 实现 留言 本 
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在 日 常生 活 中 ， 人 与 人 之 间 的 交流 是 必需 的 ， 人 
随 着 网 络 的 发 展 和 流行 ,网络 交 流 变 得 日 益 频繁 起 来 , 此 时 网 上 留言 本 发 挥 了 巨大 的 作用 。 
在 本 实例 中 用 Web 留言 本 作为 示例 ， 来 了 解 具体 应 该 怎么 对 数据 库 进行 一 些 简单 的 操作 。 
首先 ， 在 本 例 的 页 面 中 ， 存 在 一 个 输入 姓名 的 文本 框 ， 一 个 输入 留言 的 文本 框 以 及 一 个 保 
存 数据 的 按钮 。 在 按钮 下 面 放置 了 一 个 表格 ， 保 存 数据 后 从 数据 库 中 重新 取得 所 有 数据 ， 
然后 把 数据 显示 在 这 个 表格 中 。 具 体 实现 代码 如 下 所 示 : 


在 上 述 代码 中 导入 一 个 JavaScript 文件 web.js， 下 面 讲解 该 留言 本 的 具体 实现 步骤 : 
(1) 打开 数据 库 
打开 数据 库 的 代码 如 下 所 示 。 


在 该 脚本 文件 中 ， 使 用 了 一 个 变量 database， 用 这 个 变量 代表 页 面 中 的 表格 〈table 元 
素 )。db 变量 代表 使 用 openDatabase 方法 创建 的 数据 库 访问 对 象 .在 本 例 中 , 创建 了 webdata 
这 个 数据 库 并 对 其 进行 访问 。 


(2) 初始 化 
该 脚本 文件 中 定义 一 个 init 函数 ， 这 个 函数 在 页 面 打开 时 调用 。 为 了 在 打开 页 面 时 就 
往 页 面 表格 中 存 入 数据 ， 所 以 在 该 函数 中 首先 设 定 变量 datatable 为 页 面 中 的 表格 ， 然 后 调 
起 用 脚本 中 另 一 个 函数 showAllData 来 显示 数据 。 


(3) 删除 表格 中 当前 显示 的 数据 

该 脚本 文件 中 定义 了 一 个 removeAllData 函数 ,这 个 函数 是 在 showAllData 函数 中 被 调 
用 的 一 个 必 不 可 少 的 函数 , 它 的 作用 是 将 页 面 中 table 元 素 下 的 子 元 素 全 部 清除 , 只 留 下 一 
个 空 表格 框架 ， 然 后 填 入 表 头 。 这 样 在 页 面 表 格 中 当前 显示 的 数据 就 全 部 被 清除 了 ， 以 便 
重新 读 取 数据 并 存 入 表格 。 


(4) 显示 数据 

showData 函数 使 用 了 一 个 row 参数 。 该 参数 表示 从 数据 库 中 读 取 到 的 一 行 数据 。 该 函 
数 在 页 面 表格 中 使 用 t 元素 添 加 一 行 , 并 使 用 td 元 素 添加 各 列 , 然后 将 传 入 的 这 行 数据 分 
别 填 入 表格 中 添加 的 这 一 行 所 对 应 的 各 列 中 。 


(5) 显示 全 部 数据 

在 showAllData 函数 中 使 用 transaction 方法 ， 在 该 方法 的 回调 函数 中 执行 executeSql 
方法 获取 全 部 数据 。 获 取 数 据 之 后 ， 首 先 调 用 removeAllData 函数 初始 化 页 面 表格 ， 将 该 
表格 中 当前 显示 的 数据 全 部 清除 , 然后 再 循环 调用 showData 函数 , 将 获取 到 的 每 一 条 数据 
作为 参数 传 入 ， 在 页 面 上 的 表格 中 逐条 显示 获取 到 的 每 条 数据 。 


(6) 追加 数据 

接 下 来 是 addData 函数 ， 该 函数 在 saveData 函数 中 被 调用 。 在 addData 函数 中 使 用 
transaction 方法 ， 在 该 方法 的 回调 函数 中 执行 executeSql 方法 ， 将 作为 参数 传 入 进来 的 数 
据 保存 在 数据 库 中 。 


(7) 保存 数据 
在 savaData 函数 中 首先 调用 addData 函数 追加 数据 ， 然 后 调用 showAllData 函数 重新 


显示 表格 中 的 全 部 数据 。 


上 述 代码 在 Chrome 浏览 器 中 的 运行 结果 如 图 7-17 所 示 。 
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| 关于 | “| 漫画 | ”| 书籍 | “| 图 片 | “| 魔法 | “1 地 和 好 的 故事 | ”| 日 记 | 。 | 留言 | 。 “| 屠 接 | “| 扮 由 手册 | 
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7.5 习题 


一 、 填 空 题 
1. Web Storage 分 为 sessionStorage 和 两 种 。 
F 
为 文本 形式 来 保存 时 使 用 的 一 种 格式 。 
3， 当 用 户 关闭 浏览 器 窗口 后 ， 数 据 不 会 被 保存 指 的 是 对 象 。 
4. 如 果 用 户 想 删除 localStorage 对 象 的 全 部 数据 ， 可 以 使 用 
S$, 
二 、 选 择 题 


1. 下 面 支持 本 地 数据 库 的 浏览 器 的 是 
A. IE8 


B. Firefox3.0 
C. Chrome 
D. 以 上 都 支持 


方法 返回 一 个 由 实体 对 象 转 成 的 JSON 格式 的 文本 数据 。 


格式 是 JavaScript Object Notation 的 缩写 ， 是 将 JavaScript 中 的 对 象 作 


方法 。 


2. 下 面 的 代码 中 ， 打 开 和 创建 本 地 数据 库 的 是 
A. contextarc(100,100.75.0.Math.PI*2.FALSE): 
B. var db=openDatabase('db','l.0','first database',2*1024*1024); 
C. tx.executeSql(CREATE TABLE tweets(id,date,tweet)'); 
D. 以 上 都 不 正确 
3. JSON 中 最 常用 的 方法 是 。 
A. pause() 方 法 和 stringify0 方 法 
B. pause() 方 法 和 parse() 方 法 
C. parse() 方 法 和 getItem() 方 法 
D. parse() 方 法 和 stringify0 方 法 
4. 关于 Web SQL 数据 库 ， 下 列 选 项 的 说 法 是 错误 的 。 
A. executeSql 方法 的 第 一 个 参数 指 执 行 的 SQL 语句 ， 第 二 个 参数 指 SQL 语句 中 
传 入 的 参数 ， 多 个 参数 之 间 使 用 逗号 分 隔 开 。 
B. openDatabase() 方 法 创建 或 者 打开 一 个 数据 库 ， 如 果 数 据 库 不 存在 ， 则 创建 数 
据 库 
C. parse() 方 法 可 以 将 localStorage 数据 转 为 JSON 对 象 
D. stringify() 方 法 可 以 将 一 个 实体 对 象 转换 为 JSON 格式 的 文本 数据 


三 、 上 机 练习 


使 用 Web SQL 数据 库 实现 商品 的 增删 改 查 


网 上 商城 需要 增删 改 查 商品 的 信息 ， 来 记录 商品 的 基本 信息 和 销售 状况 ， 使 用 Web 
SQL 数据 库 实 现 商品 信息 的 增删 改 查 。 


7.6 ”实践 疑难 解答 


7.6.1 本 地 存储 是 否 可 以 代替 Cookie 


本 地 存储 是 否 可 以 代替 Cookie? 
网 络 课堂 : http://bbs.itzcn.com/thread-19746-1-1.html 


【问题 描述 }， 浏 览 器 使 用 Cookie 进行 身份 验证 已 经 好 多 年 ， 那 现在 既然 localStorage 
存储 空间 那么 大 ， 是 否 可 以 把 身份 验证 的 数据 直接 移植 过 来 呢 ? 

【正确 答案 】 以 现在 的 情况 来 看 ， 身 份 验 证 数据 使 用 localStorage 进行 存储 还 不 太 成 
熟 。 我 们 知道 ， 通 常 可 以 使 用 XSS 漏洞 来 获取 到 Cookie， 然 后 用 这 个 Cookie 进行 身份 验 
证 登录 。 后 来 为 了 防止 通过 XSS 获取 Cookie 数据 , 浏览 器 支持 了 使 用 HITPONLY 来 保护 
Cookie 不 被 XSS 攻击 获取 到 。 而 localStorage 存储 对 XSS 攻击 没有 任何 的 抵御 机 制 。 一 旦 
出 现 XSS 漏洞 ， 那 么 存储 在 localStorage 里 的 数据 就 极 易 被 获取 到 。 

如 果 一 个 网 站 存在 XSS 漏洞 , 那么 攻击 者 注入 如 下 代码 , 就 可 以 获取 使 用 localStorage 
存储 在 本 地 的 所 有 信息 。 


攻击 者 也 可 以 使 用 简单 的 localStorage.removeltem(key) 和 localStorage.clear() 对 存储 数 
据 进 行 清空 。 


7.6.2 ”本 地 数据 存储 存在 限制 


本 地 数据 存储 存在 哪些 限制 ? 
网 络 课 堂 : http://bbs.itzcn.com/thread-19747-1-1.html 


【问题 描述 】: HTML 5 本 地 数据 存储 功能 很 强大 ， 但 是 它 有 什么 缺点 和 限制 ? 

【正确 答案 】: 浏览 器 中 隐藏 的 本 地 数据 库 让 Web 应 用 更 容易 在 电脑 上 缓存 数据 。 对 任 
何 一 个 在 浏览 器 中 享受 这 种 台式 机 体验 的 人 来 说 ， 这 些 数据 库 可 以 节省 带宽 ， 提 升 性 能 。 
然而 它们 肯定 比 不 上 本 地 应 用 的 数据 的 强大 功能 。HTML 5 的 数据 存储 能 力 毫 无 疑问 是 很 
重要 的 功能 ， 但 是 仍然 不 能 将 存储 的 数据 迁移 到 另外 一 台 机 器 上 ， 或 是 制作 副本 、 备 份 并 
用 另外 一 个 应 用 打开 。 所 有 数据 都 是 隐藏 在 浏览 器 之 下 的 。 某 种 程度 上 说 ， 这 是 最 糟糕 的 
一 种 情况 。 因 为 你 要 承担 存储 这 些 数据 库 的 所 有 责任 而 不 能 对 它 有 任何 控制 。 一 些 最 新 的 
浏览 器 使 你 看 到 在 你 的 机 器 上 创建 了 哪些 数据 库 ， 但 这 些 信息 是 有 限 的 。Safari 甚至 使 你 
能 够 删除 数据 库 ， 但 是 你 不 能 浏览 这 些 信息 或 是 将 它们 迁移 到 另外 一 台 机 器 上 ， 这 些 文件 
在 设计 之 初 就 让 它 不 能 很 容易 地 被 迁移 。 你 同样 不 能 深入 到 文件 中 看 到 底 存 储 了 什么 。 当 
然 ， 一 个 程序 员 可 以 看 懂 这 些 文件 ， 但 前 提 是 他 们 研究 清楚 了 文件 格式 并 且 做 一 些 破解 等 
工作 。 

本 地 数据 存储 确实 是 有 限制 的 ， 但 是 在 不 同 的 浏览 器 上 ， 限 制 是 不 一 样 的 。 因 此 架构 
师 应 该 以 支持 最 好 的 浏览 器 为 准 , 推荐 用 户 去 使 用 最 好 的 软件 ,而 不 是 兼容 那些 垃圾 软件 。 
因此 ， 我 的 建议 是 : 不 要 让 自己 的 作品 去 适应 当前 的 、 一 定 会 消失 的 问题 ， 而 要 追求 卓越 。 
在 移动 浏览 器 端 ，Safari 的 表现 就 可 能 是 最 好 的 ， 存 储 可 能 也 是 最 大 的 〈 当 然 ， 鉴 于 行业 
的 剧烈 变化 ， 这 一 切 是 会 变 的 )。 


HTMLS 的 高 级 应 用 
第 Os 


HTML 5 的 出 现 越 来 越 受 到 人 们 的 重视 与 青睐 ， 它 除了 提供 绘图 技术 、 音 频 和 视频 播 
放 技术 及 数据 存储 等 常用 功能 外 ， 还 提供 了 其 他 的 高 级 技术 〈 如 网 络 通信 、 多 线程 和 离线 
应 用 等 )。 本 章 将 介绍 HTML 5 中 的 高 级 应 用 技术 ， 实 现 获 取 当 前 所 处 位 置 、 离 线 应 用 、 
使 用 线程 处 理 JSON 对 象 等 功能 。 

通过 本 章 的 学 习 ， 读 者 可 以 了 解 HTML 5 中 提供 的 高 级 技术 ， 也 可 以 熟练 使 用 这 些 技 
术 实 现 某 些 常 用 的 功能 。 

本 章 学 习 要 点 : 

> 了 解 Geolocation API 的 基本 知识 
掌握 geolocation 属性 的 3 个 方法 
掌握 如 何在 页 面 上 使 用 Google 地 图 锁定 并 且 标注 用 户 位 置 
了 解 跨 文 档 传输 协议 的 基本 概念 
掌握 如 何 实现 不 同 页 面 、 不 同 端口 和 不 同 域 之 间 的 消息 传递 
理解 离线 Web 应 用 程序 的 基本 概念 
掌 
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握 manifest 文件 的 相关 内 容 

握 applicationCache 对 象 的 常用 事件 和 方法 
熟悉 与 拖 放 API 相关 的 操作 事件 

掌握 dataTransfer 对 象 的 常用 属性 和 方法 
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8.1 获取 地 理 位 置 


HTML 5 提供 了 一 组 用 来 获取 用 户 的 地 理 位 置信 息 的 Geolocation API。 在 移动 设备 中 
如 果 浏 览 器 支持 且 设 置 有 定位 的 功能 ， 就 可 以 使 用 这 组 API 定位 用 户 的 地 理 位 置 。 本 节 详 
细 介 绍 如 何 获取 地 理 位 置信 息 。 


8.1.1 Geolocation API 概述 
HTML 中 为 window.navigator 对 象 新 添加 了 一 个 geolocation 属性 ， 该 属性 可 以 通过 


Geolocation API 进行 访问 。window.navigator 属性 中 存在 3 个 方法 : getCurrentPosition()、 
watchCurrentPosition0 和 clearWath()。 


人 getCurrentPosition0 方 法 | 


getCurrentPosition0) 方 法 可 以 获取 用 户 当前 的 地 理 位 置信 息 ， 该 方法 的 语法 形式 如 下 
所 示 : 


tion 


上 述 语法 中 getCurrentPosition() 方 法 传 入 了 3 个 参数 ,第 一 个 参数 用 于 成 功 获取 当前 地 
理 位 置 时 的 回调 函数 , 该 函数 需要 传 入 形 参 对 象 position, 该 对 象 在 下 一 节 进行 介绍 ; 第 二 
个 参数 用 于 获取 当前 地 理 位 置 失败 时 的 回调 函数 ， 第 三 个 参数 是 一 个 可 选择 的 对 象 ， 表 示 
一 些 属性 内 容 。 

getCurrentPosition() 方 法 的 第 二 个 参数 需要 使 用 error 对 象 作为 形 参 ，error 对 象 包含 两 
个 属性 : code 和 message。 它 们 的 具体 说 明 如 下 所 示 : 

(1) code 属性 

code 属性 用 于 获取 定位 失败 的 原因 ， 该 属性 的 属性 值 有 4 个 。 其 具体 说 明 如 下 所 示 : 

口 0 描述 未 知 的 错误 信息 。 

口 1 用 户 拒绝 了 定位 服务 的 请 求 。 

口 2 没有 正确 获取 (或 者 获取 不 到 ) 地 理 位 置信 息 。 

口 3 获取 地 理 位 置 时 操作 过 时 。 

(2) message 属性 

message 属性 用 于 获取 出 错 的 详细 文字 信息 ， 该 属性 是 一 个 字符 串 ， 它 在 开发 和 调试 
时 非常 有 用 ， 但 是 某 些 浏览 器 不 支持 该 属性 ， 如 Firefox 3.6 之 前 的 浏览 器 版 本 。 
getCurrentPosition() 方 法 的 第 三 个 参数 没有 省 略 时 , message 的 可 选 属性 列表 如 下 所 示 : 
口 timeout 设置 获取 地 理 位 置信 息 操 作 的 超时 限制 ， 单 位 为 毫秒 。 如 果 在 该 时 间 内 

未 获取 到 地 理 位 置信 息 则 返回 错误 。 
口 maximumAge 设置 缓存 获取 的 地 理 位 置 数据 信息 的 有 效 时 间 (单位 为 毫秒 )， 超 

过 时 间 的 重新 获取 ， 和 否则 调用 缓存 中 的 数据 信息 。 
口 enableHighAccuracy 表示 是 否 要 精确 地 获取 地 理 位 置信 息 ， 它 是 一 个 布尔 值 ， 

默认 为 false。 在 移动 设备 上 如 果 设 置 为 tue， 则 需要 消耗 更 多 的 电量 。 


由 于 使 用 设备 时 需要 结合 设备 电量 、 具 体 地 理 情况 来 综合 考虑 ， 所 以 
enableHighAccuracy 在 很 多 设备 上 设置 了 都 没有 用 。 因 此 多 数 情 况 下 把 该 
属性 设 为 默认 ， 由 设备 自身 来 调整 。 


【实践 案例 8-1】 

在 新 添加 的 HTML 页 面 中 ， 使 用 getCurrentPosition() 方 法 获取 当前 用 户 的 浏览 器 地 理 
位 置信 息 时 ， 在 弹出 是 否 共享 窗口 的 对 话 框 中 单 击 不 同 按钮 显示 不 同 的 效果 。 实 现 的 具体 
步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ，head 部 分 添加 script 元 素 ， 并 向 该 元 素 的 函数 中 添加 代码 
便于 页 面 加 载 时 调用 。JavaScript 的 具体 代码 如 下 所 示 : 


上 述 代码 中 首先 使 用 navigator geolocation 判断 当前 浏览 器 是 否 支持 位 置 查询 功能 ， 如 
果 不 支持 则 直接 弹出 提示 。 如 果 支 持 位 置 查询 功能 浏览 器 会 询问 用 户 是 否 共享 地 理 位置 ， 
如 果 共 享 则 调用 成 功 的 回调 函数 ， 如 果 拒 绝 共享 或 出 现 错 误 则 调用 失败 的 回调 函数 ， 最 后 
设置 缓存 位 置 的 有 效 时 间 和 超时 限制 。 

(2) 由 于 各 浏览 器 厂商 对 Geolocation API 的 支持 情况 不 完全 相同 ， 所 以 各 个 浏览 器 显 
示 的 效果 也 不 一 样 。 如 图 8-1 和 图 8-2 分 别 为 在 Google 浏览 器 单 击 【允许 】 和 【拒绝 】 按 


DD eetcarrentPosition0 方 EX 全 


8-1 单 击 【人 允许】 按钮 时 的 效果 8-2 单 击 【 拒 绝 】 按 钮 时 的 效果 


(3) 分 别 在 Opera 浏览 器 和 Firefox 浏览 器 中 运行 上 述 脚 本 , 页 面 的 最 终 显示 效果 如 图 
8-3 和 图 8-4 所 示 。 
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图 8-4 Firefox 浏览 器 的 运行 效果 
如 果 使 用 Google 浏览 器 显示 地 理 位 置 被 自动 拒绝 ， 可 以 把 当前 的 页 面 在 


IIS 中 发 布 ， 以 “http://localhost” 的 形式 进行 访问 。 


( 2. WatehCurrentPosition() — 


watchCurrentPosition() 方 法 用 于 持续 获取 用 户 的 当前 地 理 位 置信 息 , 它 会 定期 地 自动 获 


取 。 该 方法 的 语法 形式 如 下 所 示 : 


(onSuccess( 


上 述 语 法 中 为 watchCurrentPosition() 方 法 传递 了 3 个 参数 ， 这 3 个 参数 的 使 用 方法 与 


getCurrentPosition() 方 法 中 的 参数 相同 。 该 方法 的 返回 值 是 一 个 数字 ， 该 数字 可 以 被 
clearWatch0 方 法 使 用 ， 表 示 停 止 对 当前 地 理 位 置信 息 的 监视 。 


clearWathO 可 以 停止 对 当前 用 户 的 地 理 位 置信 息 的 监视 。 其 语法 形式 如 下 ; 


视 地 理 位 置信 息 时 的 返回 参数 。 


8.1.2 position 对 象 


使 用 该 方法 时 需要 向 该 方法 中 传递 形 参 ， 它 的 值 为 调用 watchCurrentPosition0 方 法 监 


上 一 节 已 经 通过 一 个 简单 的 案例 演示 了 getCurrentPosition() 方 法 的 使 用 ,如 果 获 取 位 置 


成 功 时 会 自动 调用 成 功 的 回调 函数 ， 该 函数 可 以 通过 一 个 对 象 参数 position 获取 所 有 的 地 
理 位 置 详 细 数 据 信息 。 

Position 对 象 包含 两 个 重要 属性 : timestamp 和 coords。timestamp 属性 表示 获取 地 理 位 
置 的 时 间 ， 而 coords 属性 则 包含 多 个 属性 值 ， 其 具体 说 明 如 表 8-1 所 示 。 


表 8-1 coords 属性 所 包含 的 值 


accuracy 当前 地 理 位 置 的 精确 度 

latitude 当前 地 理 位 置 的 纬度 

longitude 当前 地 理 位 置 的 经 度 

altitude 当前 地 理 位 置 的 海拔 高 度 

altitudeAccurancy ”当前 地 理 位 置 的 海拔 精确 度 〈 单 位 : 米 ) 

heading 当前 设置 的 前 进 方向 ,用 面 朝 正 北方 向 的 顺 时 针 旋转 角度 来 表示 。 无 法 获取 时 返回 
值 为 null 

speed 当前 设置 的 前 进 速度 ， 以 米 / 秒 为 单位 ， 匹 法 获取 时 返回 值 为 null 


表 8-1 中 只 有 latitude、longitude 和 accuracy 属性 中 保证 有 数据 ， 其 余 属 性 


是 否 返回 null 取决 于 设备 的 能 力 和 其 所 采用 的 后 端 定位 服务 器 。 如 果 有 可 
能 的 话 ，heading 属性 和 speed 属性 可 以 基于 用 户 之 前 的 位 置 计算 出 来 。 


【实践 案例 8-2】 

本 案例 通过 position 对 象 的 相关 属性 获取 用 户 当前 的 地 理 位 置信 息 。 实 现 该 功能 步 又 
如 下 所 示 : 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 span 元 素 ， 该 元 素 显示 详细 的 地 
理 信息 。 页 面相 关 具 体 代码 如 下 所 示 : 


spanig"showiessage></spa> 
《2) 页 面 加 载 时 调用 init0 函 数 自动 获取 信息 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 首先 判断 浏览 器 是 否 支持 显示 当前 位 置 的 功能 ， 如 果 支 持 成 功 则 调用 
handle_getInfo0 函 数 ， 失 败 则 调用 handle_error0 函 数 且 设置 其 他 属性 的 相关 信息 。 

(3) handle_getInfo0) 函 数 在 浏览 器 支持 成 功 时 才 执 行 ， 在 该 函数 中 传递 一 个 参数 
position 对 象 ， 然 后 调用 该 对 象 的 相关 属性 显示 详细 内 容 。 其 具体 代码 如 下 所 示 : 


上 述 代码 首先 声明 全 局 变量 srYHTML, 保存 要 显示 的 内 容 , 接 着 调用 coords 属性 的 多 
个 属性 值 分 别 显 示 经 度 值 、 纬 度 值 、 精 确 度 及 前 进 速度 和 前 进 方向 等 ， 然 后 直接 调用 
positiion 对 象 的 timestamp 属性 显示 时 间 戳 ,最 后 将 变量 中 的 内 容 显示 到 id 为 ShowMessage 
的 span 元 素 中 。 

(4) handle_error0 函 数 在 浏览 器 支持 失败 时 才 会 执行 ， 在 该 函数 中 传递 一 个 参数 error 
对 象 ， 然 后 根据 code 属性 的 值 判断 显示 不 同 的 内 容 。 其 具体 代码 如 下 所 示 : 


(5) 运行 本 案例 的 代码 进行 测试 ， 页 面 的 最 终 效果 如 图 8-5 所 示 。 


€ 3 CC | localhost/Hello/eight/testDetalls. 


获取 当前 地 理 位 置 数据 


当前 位 置 的 纬度 值 ，34.746985 
当前 位 置 的 经 度 | 


图 8-5 显示 地 理 位 置 的 详细 内 容 


8.1.3 使 用 Google 地 图 锁定 当前 位 置 


前 两 节 已 经 介绍 过 如 何 通过 getCurrentPosition() 方 法 获取 当前 地 理 位 置 的 详细 信息 , 既 
然 可 以 正确 获取 地 理 位 置 的 数据 ， 那 么 就 可 以 通过 使 用 Google 地 图 中 的 Google Map API 
将 获取 的 位 置信 息 标注 在 地 图 中 ， 从 而 实现 在 Google 地 图 中 锁定 当前 位 置 的 功能 。 

【实践 案例 8-3】 

本 案例 在 页 面 上 显示 一 幅 Google 地 图 ， 并 且 把 用 户 当前 的 地 理 位 置 标注 在 地 图 上 面 ， 
如 果 用 户 的 位 置 发 生 改变 ， 则 会 把 之 前 在 地 图 上 的 标注 自动 更 新 到 新 的 位 置 上 。 实 现 该 功 
能 的 具体 步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 ， 并 且 指 定 该 元 素 的 宽度 
和 高 度 。 页 面相 关 具 体 代码 如 下 所 示 : 


(2) 在 页 面 中 导入 Google Map API 的 脚本 文件 ， 其 具体 代码 如 下 所 示 : 


(3) 页 面 加 载 时 会 自动 调用 init0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


在 上 述 代码 中 ， 如 果 当 前 的 浏览 器 允许 显示 当前 地 理 位 置 则 调用 成 功 的 函数 
handle success0， 如 果 当 前 浏览 器 拒绝 显示 当前 位 置 则 调用 handle_error0 函 数 ， 然 后 设置 
其 他 属性 内 容 (如 缓存 时 间 和 超时 时 间 等 )。 

(4) handle_success() 函 数 将 会 加 载 显 示 用 户 的 当前 地 理 位 置信 息 ， 该 函数 的 具体 代码 
如 下 所 示 : 


上 述 代码 首先 调用 LatLng0 方 法 根据 获取 的 经 度 与 纬度 创建 一 个 地 图 中 心 坐标 ， 接 着 
在 变量 myOptions 中 将 中 心 点 设 定 为 页 面 打 开 时 Google 地 图 的 中 心 点 ,然后 创建 地 图 并 显 
示 到 页 面 中 。 创 建 完成 后 调用 Marker0 方 法 创建 一 个 地 图 标注 ， 然 后 调用 InfoWindow0 方 
法 创建 一 个 地 图 标注 窗口 并 通过 content 属性 设置 注释 内 容 , 最 后 调用 open() 方 法 在 地 图 中 
打开 标注 窗口 。 

(5) handle errorO 函 数 将 会 在 用 户 拒绝 或 获取 位 置信 息 失 败 的 情况 下 调用 ， 其 具体 代 
码 可 参考 案例 8-2 的 第 4 步 ， 这 里 不 再 详细 介绍 。 

(6) 运行 本 案例 的 代码 进行 测试 ， 不 同 浏览 器 的 显示 效果 会 有 所 不 同 ， 如 图 8-6 和 图 


图 8-6 ”Google 浏览 器 地 图 效果 图 8-7 Opera 浏览 器 地 图 效果 


8.2 ”网 络 通信 API 


HIML 5 受 广大 开发 者 重视 与 青睐 的 重要 原因 之 一 在 于 : 它 可 以 方便 地 调用 或 访问 众 
多 的 API。 本 节 将 介绍 HTML 5 如 何 通过 跨 文档 消息 传输 实现 网 路 通信 功能 。 


8.2.1 postMessage() 方 法 


为 了 代码 的 安全 性 ， 在 JavaScript 脚本 中 不 允许 跨 域 访 问 其 他 页 面 中 的 元 素 ， 这 给 不 
同 的 页 面 数据 互 访 带 来 了 障碍 。HTML 5 刚好 解决 了 这 个 问题 ， 实 现 了 在 两 个 不 同 的 域名 
与 端口 之 问 接收 发 送 数据 的 功能 。 

HIML 5 中 实现 跨 域 页 面 间 的 数据 互 访 需要 调用 对 象 的 postMessage0 方 法 ， 该 方法 的 
语法 形式 如 下 所 示 : 


上 述 语 法 中 postMessage0 方 法 包含 两 个 参数 : message 表示 所 发 送 的 消息 文本 ， 它 可 
以 是 JSON 对 象 转换 后 的 字符 内 容 ，targetOrigin 表示 发 送 数 据 的 URL 来 源 ， 可 以 在 URL 
地 址 字符 串 中 使 用 通配符 * 指 定 全 部 地 址 。otherwindow 为 接收 数据 页 面 的 引用 对 象 ， 它 可 
以 通过 window.open() 方 法 返回 该 对 象 ， 也 可 以 通过 下 标 返 回 window frames 的 单个 实体 对 
象 ， 还 可 以 是 过 ame 的 contentWindow 属性 。 


8.2.2” 跨 文档 消息 传输 


上 一 节 已 经 简单 介绍 了 postMessage( 方 法 ， 为 了 更 好 地 连接 跨 文档 消息 传输 ， 下 面 通 
过 一 个 案例 进行 详细 介绍 。 


【实践 案例 8-4】 

在 本 案例 中 首先 创建 父 页 面向 这 ame 子 页 面 发 送 消息 ，iframe 子 页 面 接收 消息 并 显示 
在 本 页 面 中 ， 然 后 再 向 父 页 面 返回 消息 ， 最 后 父 页 面 接收 从 子 页 面 传递 的 消息 并 将 该 消息 
输出 。 实 现 该 操作 的 主要 步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 input 元 素 、iframe 元 素 和 div 元 

5 素 ， 它 们 分 别 表 示 用 户 输入 的 内 容 ， 子 页 面 的 链接 内 容 及 计算 的 结果 。 页 面 的 相关 代码 如 
下 所 示 : 


(2) 用 户 输入 内 容 完 成 后 单 击 【 提 交 】 按 钮 触发 onclick 事件 调用 BtnClick 函数 ， 该 
函数 的 具体 代码 如 下 所 示 : 


上 述 代 码 中 分 别 获取 用 户 输 入 的 两 个 数字 ， 然 后 计算 这 两 个 数字 的 和 ， 并 且 将 计算 的 
结果 保存 到 变量 result 中 。 然 后 通过 当前 父 页 面子 框架 的 ID 的 postMessage() 方 法 向 页 面 发 
送 消 息 。 

(3) 添加 新 的 HTML 页 面 作为 子 页 面 ， 为 了 接受 从 父 页 面 传递 的 数据 ， 在 页 面 加 载 时 


为 页 面 添 加 message 事件 。 如 果 页 面 添加 该 事件 成 功 ， 则 通过 postMessage() 方 法 向 页 面 发 
送 数据 ， 并 且 通 过 data 属性 获取 发 送 过 来 的 数据 ，origin 属性 检测 互通 数据 的 域名 是 否 正 
确 。 该 属性 可 以 避免 因 域名 不 正确 产生 的 恶意 代码 来 源 ， 确 保 数据 交互 的 安全 性 。 子 页 面 
JavaScript 脚本 中 的 具体 代码 如 下 所 示 : 


(4) 调用 postMessage() 方 法 时 会 向 页 面 发 送 数据 请 求 并 且 触 发 message 事件 ， 为 父 页 
面 的 JavaScript 脚本 中 添加 该 事件 。 其 具体 代码 如 下 所 示 : 


上 述 代码 中 如 果 添 加 事件 成 功 则 调用 回调 函数 显示 数据 ，event 对 象 的 data 属性 表示 
捕获 从 子 页 面 发 送 过 来 的 数据 ， 且 将 该 数据 显示 到 ID 为 result 的 div 元 素 中 。 

(5) 运行 本 案例 输入 内 容 后 单 击 【 提 交 】 按 钮 进行 测试 , 页 面 的 最 终 运行 效果 如 图 8-8 
所 示 。 


计算 两 个 数字 的 和 


请 输入 第 一 个 数字 ， 36 
请 输入 第 二 个 数字 ， 58 


计算 的 结果 是 ，98 


8-8 ”案例 8-4 运行 效果 


8.3 使 用 Web Worker 处 理 线程 


HTML 5 中 Web Worker 是 构造 Web 应 用 程序 的 重要 技术 ,使 用 该 技术 可 以 解决 HTML 


5 之 前 因为 某 个 脚本 耗 时 过 长 而 跳出 一 个 对 话 框 提示 用 户 脚 本 运行 时 间 过 长 ， 导 致 用 户 不 
得 不 结束 这 个 处 理 的 爆 俯 情况 。 本 节 将 详细 介绍 如 何 使 用 Web Worker 处 理 线程 。 


8.3.1 Web Worker 概述 


Web Worker 是 HTML 5 中 新 添加 的 、 用 来 在 Web 应 用 程序 中 实现 后 台 处 理 的 一 项 技 
术 。 为 了 解决 之 前 版 本 中 耗费 时 间 长 、 中 断 执行 的 处 理 及 长 时 间 无 反应 的 情况 ，HTML 5 
中 也 增加 了 Web Worker API, 使 用 这 个 API 用 户 可 以 很 容易 地 创建 后 台 运行 的 线程 (HITML 
5 中 被 称 为 worker)。 这 样 如 果 将 可 能 耗费 较 长 时 间 的 处 理 交 给 后 台 去 执行 的 话 ， 对 用 户 在 
前 台 页 面 中 执行 的 操作 就 不 会 受到 影响 。 

Web Worker 进程 能 够 在 不 影响 用 户 界 面 的 情况 下 处 理 任 务 ， 并 且 它 可 以 使 用 
XMLHttpRequest 来 处 理 O， 无 论 responseXML 和 channel 属性 是 否 为 null。 它 也 为 Web 
前 端 网 页 上 的 脚本 提供 了 一 种 能 在 后 台 进 程 中 运行 的 方法 。 一 旦 它 被 创建 ，Web Worker 就 
可 以 通过 postMessage0 问 任务 池 发 送 任务 请 求 ， 执行 完 之 后 再 通过 postMessage() 把 消息 返 
回 给 创建 者 指定 的 事件 ， 使 其 处 理 程序 。 


创建 后 台 线程 的 步骤 非常 简单 ,在 Worker 类 的 构造 器 中 将 需要 在 后 台 线程 中 执行 的 脚 
本 文件 的 URL 作为 参数 传 入 ， 然 后 创建 Worker 对 象 即 可 。 其 主要 代码 如 下 所 示 : 


上 述 代 码 首先 创建 了 一 个 名 为 worker 的 后 台 线 程 ， 该 对 象 创建 完成 后 调用 
postMessage() 方 法 向 后 台 线 程 发 送 文本 格式 的 data 数据 。 


在 后 台 线程 中 是 不 能 访问 页 面 或 窗口 对 象 的 ， 如 果 在 后 台 线 程 的 脚本 文件 
中 使 用 到 window 对 象 或 document 对 象 则 会 发 生 错误 。 


为 了 在 前 台 接收 后 台 线 程 返 回 的 数据 ,需要 在 定义 work 对 象 后 添加 一 个 message 事件 ， 
该 事件 用 于 捕获 后 台 线程 返回 的 数据 。 其 调用 格式 如 下 所 示 : 


图 8-9 为 Web Worker 的 简单 操作 流程 图 。 


上 面 已 经 简单 介绍 了 如 何 创建 和 使 用 Web Worker, 下 面 主要 通过 一 个 案例 演示 如 何 使 


用 Worker 对 象 处 理 线程 。 


一 


postMessage() 方 法 


图 8-9 ”Web Worker 的 操作 流程 图 


【实践 案例 8-5】 

本 案例 中 页 面 加 载 时 创建 一 个 Worker 后 台 线 程 , 当 输 入 内 容 完成 后 单 击 按钮 向 后 台 线 
程 发 送 输入 内 容 ， 后 台 线 程 将 数据 处 理 完成 后 返回 前 台 调 用 并 输入 消息 。 实 现 该 功能 的 具 
体 步骤 如 下 所 示 : 


(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 textarea 元 素 、input 元 素 和 div 元 
素 等 。 其 具体 代码 如 下 所 示 : 


(2) 在 JavaScript 中 首先 判断 浏览 器 是 否 支 持 Worker 对 象 ， 如 果 支 持 则 直接 创建 该 对 
象 ， 如 果 不 支持 则 弹出 提示 。 具 体 代码 如 下 所 示 : 


(3) 单 击 【提交 】 按 钮 时 触发 该 按钮 的 onclick 事件 调用 bmSend0 函 数 ， 该 函数 的 具 
体 代 码 如 下 所 示 : 


上 述 代 码 首先 获取 用 户 输入 的 评论 内 容 和 评论 人 ,然后 将 它们 组 合 保存 到 变量 con 中 ， 
最 后 调用 objWorker 对 象 的 postMessage() 方 法 发 送 内 容 。 

(4) 创建 名 称 为 commentjs 的 文件 ， 在 该 文件 中 接收 页 面 传 过 来 的 内 容 。 该 文件 中 的 
具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 event 对 象 的 data 对 象 获 取 从 页 面 中 传 入 的 数据 ， 然 后 调用 split0 
方法 拆 分 以 @ 为 主 的 内 容 ， 最 后 调用 postMessage() 方 法 将 保存 到 result 变量 中 的 内 容 返 回 
到 上 个 页 面 。 

(5) 调用 postMessage() 方 法 时 会 触发 onmessage 事件 ， 在 页 面 中 通过 objWorker 对 象 
的 onmessage 事件 来 获取 信息 并 接收 ， 最 后 将 内 容 显 示 到 div 元 素 中 。 其 具体 代码 如 下 
所 示 : 


(6) 运行 本 案例 ， 输 入 内 容 后 单 击 【 提 交 】 按 钮 查看 效果 ， 最 终 运行 效果 如 图 8-10 
所 示 。 


日 forker 对 和 简单 使 用 

i CD locathost/Holi o/cieht/ sionsbere/detail. hta: 安民 
下 加 
四 | ee 


一 个 口 全 1 a 


[Rk 和 和 
: 2 人 0 | 


只 是 ， 天 下 的 儿女 们 ， 一 定 要 折 遇 | 塌 你 们 父母 健在 的 光 同 。 


OD 
i em 起 在 父母 年 轻 ， 好 好 的 浴 葡 他 们 吗 。。 


图 8-10 ”案例 运行 效果 


8.3.2 ”线程 中 的 JavaScript 


线程 中 可 以 使 用 JavaScript 脚本 文件 ， 表 8-2 列 出 了 在 线程 中 所 有 可 用 的 变量 、 方 法 
与 类 。 


表 8-2 线程 中 可 用 的 JavaScript 文 件 


self 该 关键 字 用 来 表示 本 线程 范围 内 的 作用 域 

postMessage(message) 向 创建 线程 的 源 窗口 发 送 消息 

onmessage 获取 接收 消息 的 事件 句柄 

importScripts(urls) 导入 其 他 JavaScript 脚本 文件 ， 参 数 为 脚本 文件 的 URL 地 址 

navigator 与 window.navigator 对 象 类 似 ， 包 含 appName、userAgent 和 appVersion 

等 属性 

sessionStorage 和 1localStorage ”可 以 在 线程 中 使 用 Web Storage 

XMLHttpRequest 可 以 在 线程 中 处 理 请 求 

Web Workers 可 以 在 线程 中 翌 套 线程 

setTimeout 和 setInterval 在 线程 中 实现 定时 处 理 

close0 结束 本 线程 

evalO0、escape0 和 isNaNO 等 ”可 以 使 用 JavaScript 的 所 有 核心 函数 

object 可 以 创建 和 使 用 本 地 对 象 

WebSockets 可 以 使 用 Web API 向 服务 器 发 送 和 接收 消息 

母 导入 的 脚本 文件 必须 与 使 用 该 线程 文件 的 页 面 在 同一 个 城中 ， 了 
个 端口 中 。 


对 于 多 个 JavaScript 文件 组 成 的 应 用 程序 来 说 , 可 以 通过 包含 script 元 素 的 方式 在 页 面 
加 载 时 同步 加 载 JavaScript 文件 ， 但 是 由 于 Web Worker 没有 访问 document 对 象 的 权限 ， 
所 以 必须 通过 importScripts 导入 其 他 的 JavaScript 文件 ， 其 使 用 方法 如 下 所 示 : 


可 以 使 用 importScripts 导入 多 个 脚本 文件 ， 它 们 会 按照 顺序 执行 。 其 主要 代码 如 下 
所 示 : 


8.3.3 使 用 线程 处 理 JSON 对 象 


除了 线程 可 以 处 理 一 般 数据 外 ， 还 可 以 传递 JSON 对 象 进行 处 理 ， 即 可 以 通过 后 台 线 
程 传递 一 个 JSON 对 象 给 前 台 ， 前 台 接收 并 显示 对 象 中 的 内 容 。 

【实践 案例 8-6】 

在 本 案例 中 , 页 面 加 载 时 创建 一 个 Worker 后 台 线 程 , 该 线程 返回 给 前 台 页 面 一 个 JSON 
对 象 ， 然 后 在 前 台 获 取 该 JSON 对 象 ， 使 用 遍历 的 方式 显示 对 象 中 的 内 容 。 实 现 本 案例 的 
具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页面， 在 页 面 的 合适 位 置 添加 div 元 素 ， 该 元 素 显 示 JSON 对 象 
中 的 所 有 内 容 。 相 关 代 码 如 下 所 示 。 


(2) 页 面 加 载 时 首先 判断 浏览 器 是 否 支持 Worker 对 象 ， 如 果 不 支 持 则 弹出 提示 ， 如 果 
支持 则 直接 创建 该 对 象 并 调用 postMessage0 方 法 发 送 消息 。 其 具体 代码 如 下 所 示 : 


(3) 添加 名 称 为 jsonjs 的 脚本 文件 , 然后 在 该 文件 中 声明 变量 json, 然后 在 onmessage 
事件 中 调用 postMessage0) 方 法 将 该 变量 传 入 返回 到 上 一 个 页 面 中 。 该 文件 的 具体 代码 如 下 
所 示 : 


(4) 添加 objWorker 对 象 的 onmessage 事件 ， 然 后 在 该 事件 中 通过 for 语句 遍历 显示 
JSON 对 象 中 的 内 容 ， 并 显示 到 id 名 称 为 AuthorImfo 的 div 元 素 中 。 该 事件 的 具体 代码 如 
下 所 示 : 


(5) 运行 本 案例 进行 测试 ， 页 面 的 最 终 运行 效果 如 图 8-11 所 示 。 


€ PC |D localhost/Helio/etent /riancnene/json-htal 


《 夏 洛 的 网 》 图 书 详细 信息 


常用 的 标签 。 < 夏 洛 的 网 》 (18) 儿童 文学 (8) 小 说 (6) 好 所 (5) 童话 (4) 爱 (3) 
是 淮 (1) 校 四 生活 (1) 


的 小 猪 和 一 只 叫 萎 洛 的 晓 昨 成 为 朋友 。 小 猪 未 来 的 命运 是 


只 各 叫 威 尔 从 
二 这 个 翡 原 的 结果 让 威 尔 伯 心 慰 胆 案 ， 它 也 普 安 试 

过 逃跑 ， 但 它 毕 宽 是 一 只 猪 ， 者 似 名 小 的 村 海 却 沈 ， “让 我 条 帮 你 。* 于 是 村 
权 用 它 的 网 在 洗 析 中 织 岂 主 站 车"、 “ 朱 克 曼 的 名 猪 等 字 翌 ， 那 此 被 人 类 视 为 
奇迹 的 宇 让 成 尔 伯 的 命运 整个 这 转 ， 信介 到了 和 风 特 史 交 和 一 个 安 闪 天 
命 的 未 来 。 但 就 在 这 时 ， 多 针 要 洛 的 生命 加 直到 了 尽头 … 


8-11 多 线程 处 理 JSON 数据 的 运行 效果 


8.3.4 ”线程 嵌 套 


上 一 节 介绍 了 如 何 使 用 后 台子 线程 分 割 处 理 前 台 JavaScript 代码 的 方法 ， 其 实在 线程 
中 还 可 以 身 套 子 线程 ， 这 样 可 以 把 一 个 较 大 的 后 台 线程 切割 分 成 几 个 子 线程 ， 在 每 个 子 线 
程 中 各 自 完成 相对 独立 的 一 部 分 工作 。 这 种 方法 可 以 将 各 功能 模块 进行 分 离 ， 形 成 独立 的 
子 模块 ， 并 且 有 利于 Web 应 用 的 开发 。 

【实践 案例 8-7】 

在 本 案例 中 随机 生成 10 位 数字 ， 然 后 找 出 能 被 3 整除 的 数字 并 将 它们 作为 登录 时 的 


验证 码 。 实 现 该 功能 的 主要 步骤 如 下 所 示 。 
(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 input 元 素 和 span 元 素 。 页 面 的 相 
关 代 码 如 下 所 示 : 


(2) 页 面 加 载 时 根据 当前 浏览 器 是 否 支持 Worker 对 象 创建 后 台 线程 ， 然 后 调用 
postMessage() 方 法 发 送 消息 。 其 具体 代码 如 下 所 示 : 


(3) 创建 名 称 为 scriptjs 的 脚本 文件 ， 该 文件 为 后 台 线程 的 主线 程 。 在 主线 程 中 随即 
生成 一 个 包含 10 位 数字 的 数组 , 然后 把 该 数组 提交 到 子 线程 。 在 子 线程 中 把 能 被 3 整除 的 
数字 挑选 出 来 ， 然 后 送 回 主线 程 ， 主 线程 再 把 挑选 结果 送 回 页 面 进行 显示 。 该 文件 的 具体 
代码 如 下 所 示 : 


(4) 创建 名 称 为 script2js 的 脚本 文件 ， 该 文件 为 后 台 线程 的 子 线程 。 该 线程 在 接收 到 
的 随机 数组 中 挑选 出 能 被 3 整除 的 数字 ， 然 后 拼接 成 字符 串 并 返回 。 该 文件 的 具体 代码 如 
下 所 示 : 


(5) 在 页 面 中 添加 接收 主线 程 信息 的 代码 ， 在 该 代码 中 将 接收 的 数据 进行 拆 分 ， 然 后 
再 分 别 显 示 到 id 为 code 的 span 元 素 中 。 其 具体 代码 如 下 所 示 : 


(6) 运行 本 案例 的 代码 进行 测试 ， 页 面 的 最 终 运行 效果 如 图 8-12 


所 示 。 


8-12 ”线程 嵌 套 交互 数据 的 运行 效果 


8.4 离线 应 用 程序 


HTML 5 提供 了 一 个 供 本 地 缓存 使 用 的 API， 使 用 这 个 API 可 以 实现 离线 Web 应 用 程 
序 的 开发 ， 本 节 将 详细 介绍 离线 应 用 程序 的 相关 知识 。 


8.4.1 ”离线 Web 应 用 程序 概述 


离线 Web 应 用 程序 是 指 当 客户 端 与 Web 应 用 程序 的 服务 器 没有 建立 连接 时 ， 也 能 够 
正常 在 客户 端 本 地 使 用 该 Web 应 用 程序 进行 有 关 的 操作 。HTML 5 中 引用 了 离线 应 用 程序 
缓存 ， 它 使 得 在 无 网 络 连接 状态 下 运行 应 用 程序 成 为 可 能 ， 有 了 它 Web 应 用 程序 就 可 以 在 
没有 网 络 连 接 的 情况 下 运行 。 

开发 人 员 可 以 指定 HTML 5 应 用 程序 中 , 具体 哪些 资源 (如 CSS、JavaScript 和 HTML 
等 ) 脱 机 时 可 用 。 离 线 应 用 的 场景 有 很 多 ， 常 见 的 情况 如 下 所 示 。 

口 ”编辑 文档 

口 编辑 和 显示 演示 文档 

口 ”创建 待 办 事宜 列表 

口 阅读 和 撰写 电子 邮件 

使 用 离线 存储 避免 了 加 载 应 用 程序 时 所 需 的 常规 网 络 请 求 ， 如 果 缓 存 清单 文件 是 最 新 
的 ， 浏 览 器 就 不 用 检查 其 他 资源 是 否 最 新 。 大 部 分 应 用 程序 可 以 从 本 地 应 用 缓存 中 加 载 完 
成 ， 另 外 从 缓存 中 加 载 资源 可 节省 带宽 ， 这 对 于 移 除 Web 应 用 是 相当 重要 的 。 

既然 使 用 本 地 缓存 的 API 可 以 实现 离线 Web 应 用 程序 的 开发 , 那么 它 和 浏览 器 网 页 组 
存 存在 哪些 区 别 呢 ? 如 下 几 点 列 出 了 比较 明显 的 区 别 ; 

(1) 本 地 缓存 是 为 了 整个 Web 应 用 程序 服务 的 ; 浏览 器 的 网 页 缓存 只 服务 于 单个 网 页 。 

(2) 本 地 缓存 只 缓存 那些 指定 需要 缓存 的 网 页 ; 任何 网 页 都 具有 网 页 缓存 。 

(3) 本 地 缓存 是 可 靠 的 ， 开 发 人 员 可 以 控制 哪些 内 容 进 行 缓存 ,哪些 内 容 不 进行 缓存 ; 
网 页 缓存 是 不 安全 、 不 可 靠 的 。 

(4) 开发 人 员 可 以 通过 编程 的 方法 来 控制 缓存 的 更 新 ， 利 用 缓存 对 象 的 各 种 属性 、 状 
态 和 事件 等 开发 强大 的 离线 应 用 程序 。 


8.4.2 manifest 文件 


为 了 能 够 在 离线 状态 下 访问 Web 应 用 , 需要 使 用 manifest 文件 将 离线 时 需要 缓存 文件 
的 URL 写 入 该 文件 。 当 浏览 器 与 服务 器 建立 联系 后 , 浏览 器 会 根据 manifest 文件 所 列 的 组 
存 清单 将 相应 的 资源 文件 缓存 在 本 地 。 

manifest 文件 是 一 个 简单 的 文本 文件 ， 在 该 文件 中 以 清单 的 形式 列举 了 需要 被 缓存 或 
不 需要 被 缓存 的 资源 文件 的 文件 名 称 ， 以 及 这 些 资 源 文件 的 访问 路 径 。 开 发 人 员 可 以 为 每 
一 个 页 面 单独 指定 一 个 manifest 文件 ， 也 可 以 对 整个 Web 应 用 程序 指定 一 个 总 的 manifest 


文件 。 


于 manies 文 伯 


所 有 创建 文本 文件 的 编辑 器 都 可 以 新 建 manifest 文件 ， 只 要 在 保存 文件 时 将 扩展 名 设 
置 为 “.manifest” 即 可 。 例 如 创建 名 称 为 hello manifest 的 文件 ， 该 文件 的 详细 内 容 如 下 段 
代码 所 示 : 


上 段 代码 在 指定 资源 文件 的 时 候 ， 把 资源 文件 分 为 3 类 : CACHE、NETWORK 和 
FALLBACK。 它 们 的 具体 说 明 如 下 所 示 : 

(1) CACHE 表示 离线 时 浏览 器 需要 缓存 到 本 地 服务 器 资源 的 文件 列表 。 为 某 个 页 面 
编写 manifest 类 型 文件 时 不 需要 将 该 页 面 放 入 列表 中 ， 因 为 浏览 器 在 进行 本 地 资源 缓存 时 
自动 将 这 个 页 面 进行 了 缓存 。 

(2) NETWORK 表示 在 线 时 需要 访问 的 资源 文件 列表 ， 即 指定 不 进行 本 地 缓存 的 资源 
文件 。 这 些 文件 只 有 在 浏览 器 与 服务 器 之 问 建 立 联系 时 才能 访问 ， 如 果 设 置 为 “* ”表示 除 
了 CACHE 类 型 中 标明 需要 缓存 的 文件 外 都 不 进行 缓存 。 

(3) FALLBACK 表示 以 成 对 方式 列 出 不 能 访问 文件 的 替补 文件 。 第 一 个 文件 为 能 够 在 
线 访问 时 使 用 的 资源 文件 ， 第 二 个 文件 为 不 能 在 线 访问 时 使 用 的 备用 资源 文件 。 

上 述 3 个 类 型 都 是 可 选 的 , 但 是 如 果 文 件 开 头 没有 指定 任何 类 型 而 直接 书写 资源 文件 ， 
浏览 器 会 把 这 些 资源 文件 视 为 CACHE 类 型 ， 直 到 看 见 第 一 个 被 书写 出 来 的 类 型 为 止 。 另 
外 manifest 文件 中 允许 重复 书写 同一 类 型 ， 如 下 面 清单 中 的 代码 所 示 : 


在 manifest 文件 中 编写 代码 时 需要 注意 以 下 几 点 : 

口 manifest 文件 中 第 一 行 必须 是 “CACHE MANIFEST”， 它 可 以 把 文本 文件 的 作用 
报告 给 浏览 器 ， 即 对 本 地 缓存 中 的 资源 文件 进行 具体 设置 。 

口 在 清单 中 编写 注释 时 要 另 起 一 行 ， 并 且 以 “# ”开头 。 

口 通过 注释 的 方式 标明 每 一 个 manifest 文件 的 版 本 号 ， 以 便于 更 新 文件 时 使 用 。 


绑 定 页 面 时 需要 在 Web 应 用 程序 页 面 中 html 元 素 的 manifest 属性 中 指定 该 文件 的 
URL。 指 定 方法 如 下 所 示 : 


创建 manifest 文件 并 将 该 文件 与 页 面 绑 定 后 无 法 实现 Web 页 面 的 离线 访问 , 还 需要 让 
服务 器 支持 扩展 名 为 “.manifest” 的 文件 ， 否 则 服务 器 无 法 读 取 manifest 类 型 中 的 文件 。 

下 面 以 Windows 版 服务 器 为 例 介绍 如 何在 IS 中 配置 , 使 其 支持 manifest 类 型 的 文件 。 
其 具体 步骤 如 下 所 示 。 

(1) 打开 IS 后 选中 “默认 网 站 ”或 其 他 站 点 名 称 ， 然 后 右 击 选择 【属性 】 选 项 弹出 
对 话 框 。 在 对 话 框 中 选择 【HTTP 头 】 选 项 卡 ， 效 果 如 图 8-13 所 示 。 


JITP 
口 启用 内 容 过 期 E) 
内 容 点 这 EC) 
了 芭 过 其 中) 
| 全 Hg 癌 庆 后 过 期 GD) 上 上 
| Onetia oO) 
上 自 定 义 ITTP 头 
X-Powered-By: ASP NET 


内 容 妇 级 
| PT 


8-13 【HTTP 头 】 选 项 卡 


(2) 单 击 上 述 选项 卡 中 的 【文件 类 型 】 按 钮 ， 在 弹出 的 对 话 框 中 单 击 【新 类 型 】 按 钮 
弹出 【文件 类 型 】 对 话 框 ， 效 果 如 图 8-14 所 示 。 


(3) 在 图 8-14 中 输入 扩展 名 和 内 容 类 型 后 单 击 【确定 】 按 钮 , 这 样 就 完成 了 对 manifest 
文件 类 型 的 创建 ， 效 果 如 图 8-15 所 示 。 


图 8-14 【文件 类 型 】 对 话 框 图 8-15 添加 文件 类 型 完成 


4。 亢 线 应 用 的 基本 合 用 


前 面 已 经 详细 介绍 了 manifest 文件 的 创建 、 使 用 及 如 何在 IS 服务 器 中 进行 配置 ， 下 
面 将 通过 简单 的 示例 介绍 当中 断 与 服务 器 连续 再 次 访问 页 面 时 ， 仍 然 能 够 显示 百度 首页 的 
图 片 的 功能 。 

【实践 案例 8-8】 

实现 本 案例 功能 的 主要 步骤 如 下 所 示 。 

51) 添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 导入 脚本 文件 并 添加 image 元 素 和 input 
元 素 等 ， 页 面 的 主要 代码 如 下 所 示 : 


(2) 在 css 文件 夹 下 添加 名 称 为 base.css 的 样式 文件 , 该 文件 设计 页 面 的 相关 元 素 的 样 
式 内 容 。 其 主要 的 代码 如 下 所 示 : 


一 


(3) 页 面 绑 定 了 名 称 为 base -manifest 的 文件 ， 添 加 该 文件 然后 列举 服务 器 需要 缓存 至 
本 地 的 文件 清单 。 该 文件 的 具体 代码 如 下 所 示 : 


(4) 运行 本 示例 的 代码 查看 效果 ， 页 面 效果 如 图 8-16 所 示 。 将 电脑 断 开 网 络 连接 重新 
运行 页 面 ， 最 终 效 果 如 图 8-17 所 示 。 
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图 8-16 页面 运行 效果 图 8-17 断 开 网 络 时 的 效果 


”5 浏览 器 与 服务 器 的 交互 |) 


当 使 用 离线 应 用 程序 时 ， 理 解 浏览 器 和 服务 器 之 间 的 通信 是 相当 重要 的 ， 上 一 节 已 经 
通过 与 页 面 绑 定 manifest 类 型 文件 的 base manifest 缓存 了 2 个 资源 文件 。 其 中 浏览 器 与 服 
务 器 的 数据 交互 过 程 如 下 所 示 : 


(1) 浏览 器 : 请 求 访问 页 面 http://localhost/base/eight/lixian/base.html。 

(2) 服务 器 : 返回 base.html 页 面 。 

(3) 浏览 器 : 解析 返回 的 base.html 页 面 ， 请 求 服务 器 返回 该 页 面 所 包含 的 全 部 资源 文 
件 ， 包 括 base manifest 文件 。 

(4) 服务 器 : 返回 浏览 器 所 请 求 的 所 有 资源 文件 。 

(5) 浏览 器 : 解析 返回 的 base.manifest 文件 ， 请 求 返回 URL 清单 中 的 资源 文件 。 

(6) 服务 器 : 再 次 返回 URL 清单 中 本 地 缓存 的 文件 。 

(7) 浏览 器 : 对 本 地 缓存 进行 更 新 ， 将 新 获取 的 URL 清单 中 的 资源 文件 更 新 至 本 地 
缓存 ， 且 触发 一 个 事件 通知 本 地 缓存 被 更 新 。 

经 过 上 述 步骤， 浏览 器 清单 中 列 出 的 文件 已 经 完全 载 入 了 缓存 。 如 果 再 次 打开 浏览 器 
访问 base.html 且 base.manifest 文件 没有 被 修改 过 ， 浏 览 器 与 服务 器 的 数据 交互 过 程 如 下 
所 示 : 

(1) 浏览 器 : 再 次 请 求 页 面 http://localhost/base/eight/lixian/base.html。 

(2) 浏览 器 : 找到 此 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 base.html 页 面 。 

(3) 浏览 器 : 使 用 所 有 本 地 缓存 中 的 资源 文件 解析 base.html 网 页 。 

(4) 浏览 器 : 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 : 返回 一 个 304 代码 ， 通 知 浏览 器 manifest 没有 发 生变 化 。 

如 果 网 页 上 的 资源 文件 被 本 地 缓存 过 ， 下 次 请 求 打开 这 个 页 面 时 总 是 会 先 使 用 本 地 组 
存 中 的 资源 ， 然 后 再 请 求 manifest 文件 。 

如 果 再 次 打开 浏览 器 访问 base.html 页 面 且 base.manifest 文件 已 经 被 更 新 过 , 那么 浏览 
器 与 服务 器 之 间 的 数据 交互 如 下 所 示 : 

(1) 浏览 器 : 再 次 请 求 页 面 http://localhost/base/eight/lixian/base.html。 

(2) 浏览 器 : 找到 此 页 面 被 本 地 缓存 ， 于 是 使 用 本 地 缓存 中 的 base.html 页 面 。 

(3) 浏览 器 : 使 用 所 有 本 地 缓存 中 的 资源 文件 解析 base.html 网 页 。 

(4) 浏览 器 : 向 服务 器 请 求 manifest 文件 。 

(5) 服务 器 : 返回 更 新 过 的 manifest 文件 。 

(6) 浏览 器 : 处 理 manifest 文件 ， 如 果 该 文件 已 经 被 更 新 则 请 求 所 有 要 求 进行 本 地 组 
存 的 资源 文件 ， 包 括 base.html 页 面 本 身 。 

(7) 浏览 器 : 返回 要 求 进行 本 地 缓存 的 资源 文件 。 

(8) 对 本 地 缓存 进行 更 新 ， 将 新 获取 的 URL 清单 中 的 资源 文件 更 新 至 本 地 缓存 ， 且 
触发 一 个 事件 通知 本 地 缓存 被 更 新 。 


即使 资源 文件 被 修改 过 了 ， 但 是 任何 之 前 载 入 的 资源 都 不 会 发 生变 化 。 即 
更 新 过 后 的 本 地 缓存 中 的 内 容 还 不 能 使 用 ， 只 有 重新 打开 这 个 页 面 时 才 会 
使 用 更 新 过 后 的 资源 文件 。 


8.4.3 applicationCache 对 象 


applicationCache 对 象 代表 了 本 地 缓存 ， 它 可 以 用 来 通知 用 户 本 地 缓存 已 经 被 更 新 ， 也 


允许 用 户 手 动 更 新 本 地 缓存 。 但 是 只 有 在 manifest 文件 已 经 修改 时 该 对 象 才 会 触发 一 个 事 
件 表示 已 经 更 新 。 


三 丰 applicationCache 对 象 的 事件 “| 


applicationCahce 对 象 中 包含 一 系列 的 事件 ， 它 们 的 具体 说 明 如 表 8-3 所 示 。 
表 8-3 application 对 象 的 常用 事件 


checking 检查 manifest 文件 是 否 存在 
downloading 检查 到 mainfest 文件 已 更 新 就 执行 下 载 操作 
noupdate 返回 304 表示 没有 更 新 ， 通 知 浏览 器 直接 使 用 本 地 文件 
progress 下 载 时 周期 性 触发 ， 可 以 通过 该 事件 获取 已 经 下 载 的 文件 个 数 
cached 下 载 后 结束 触发 ， 表 示 缓 存 已 经 成 功 
Updateready 检测 本 地 缓存 是 否 完成 更 新 
error 本 地 缓存 出 现 错误 时 触发 该 事件 
上 述 事 件 中 任何 与 本 地 缓存 有 关 的 处 理发 生 错 误 都 会 触发 error 事件 ,可 能 触发 该 事件 
的 情况 分 为 以 下 几 种 : 


口 ”开始 更 新 本 地 缓存 时 缓存 名 单 被 再 次 更 改 。 

口 缓存 名 单 被 找到 且 更 改 ， 但 浏览 器 不 能 下 载 某 个 缓存 名 单 中 的 资源 。 

口 缓存 名 单 被 找到 且 没有 更 改 ， 但 引用 缓存 名 单 中 的 HIML 页 面 不 能 正确 下 载 。 

口 ”缓存 名 单 中 返回 一 个 404 错误 ( 页面 未 找到 ) 或 者 410 错误 (永久 消失 )。 

【实践 案例 8-9】 

本 案例 通过 一 个 简单 的 示例 将 浏览 器 与 服务 器 交互 过 程 中 所 发 生 的 事件 显示 到 页 面 
上 。 实 现 的 具体 步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 ， 该 元 素 显 示 事 件 列表 。 
页 面具 体 代 码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 init0 函 数 ， 在 该 函数 中 添加 多 个 可 能 触发 的 事件 。 具体 实 现代 码 
如 下 所 示 : 
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},true); 
applicationCache.addEventListener ("downloading", function(){ 
msg.innerHTML += "正在 下 载 可 用 的 缓存 .. .<br/>"; 

} vtrue) 7 

applicationCache.addEventListener ("progress",function(){ 
msg.innerHTML += "本 地 缓存 正在 更 新 中 .. .<br/>"; 

:true); 

applicationCache.addEventListener ("updateready", function(){ 
msg.innerHTML += "触发 了 缓存 事件 .. .<br/>"; 

:true); 

applicationCache.addEventListener ("cached", function(){ 
msg.innerHTML += "下 载 结 束 后 缓存 已 经 成 功 .. .<br/>"; 

true); 

applicationCache.addEventListener ("error", function(){ 

msg.innerHTML += "本 地 缓存 更 新 时 出 现 错误 . . .<br/>"; 


:true); 


“Be 


运行 本 案例 进行 测试 ， 当 在 浏览 器 中 打开 网 页 且 manifest 文件 没有 更 新 时 的 效果 
如 图 8-18 所 示 。 当 在 浏览 器 中 打开 网 页 且 manifest 文件 已 经 更 新 时 的 效果 如 图 8-19 所 示 。 


on 事件 
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没有 更 新 manifest 文件 时 的 效果 图 8-19 更 新 manifest 文件 时 效果 


. applicationCache 对 象 的 方法 1 


applicationCache 对 象 除了 包含 事件 外 也 包含 多 个 方法 ， 其 中 最 常用 的 方法 有 两 个 : 
update() 方 法 和 swapCache() 方 法 。 它 们 的 具体 说 明 如 下 所 示 。 

DD update0 

update() 方 法 可 以 手动 更 新 本 地 缓存 ， 调 用 的 格式 为 window.application.update()。 如 果 
有 可 更 新 的 本 地 缓存 则 调用 该 方法 可 以 对 其 进行 更 新 , 除了 通过 updateready 事件 监测 是 否 
为 可 更 新 的 本 地 缓存 外 ， 也 可 以 调用 applicationCache 对 象 的 status 属性 。status 属性 有 多 
个 值 ， 当 该 值 为 4 时 表示 有 可 更 新 的 本 地 缓存 。 


口 


SwapCache0 


swapCache() 方 法 也 可 以 用 来 更 新 本 地 缓存 ， 但 是 它 与 update() 方 法 有 两 点 不 同 。 它 们 


更 新 本 地 缓存 的 时 间 不 一 样 ， 
早 。 另 外 这 两 个 方法 触发 的 弹 


swapCache() 方 法 是 将 本 地 缓存 立即 更 新 ， 它 比 update() 方 法 


有 件 也 不 一 样 ，swapCache(0) 方 法 必须 在 updateready 导 


lE 件 中 才 


能 调用 ， 而 update0 方 法 可 以 随时 调用 。 
applicationCache 对 象 的 status 属性 有 多 个 值 ， 不 同 的 值 其 表现 状态 不 同 。 这 些 状 态 的 
具体 说 明 如 下 所 示 : 
口 uncache 数值 为 0， 表 示 本 地 浏览 器 缓存 与 应 用 程序 缓存 没有 关联 。 
idle 数值 为 1， 表 示 应 用 程序 的 缓存 是 最 新 缓存 。 
checking 数值 为 2， 检查 manifest 文件 是 否 存 在 。 
downloading 数值 为 3， 如果 manifest 文件 已 经 被 更 新 ， 表 示 开 始 下 载 。 
updateready 数值 为 4， 确 定 manifest 文件 是 否 被 更 新 。 
obsolete 数值 为 5， 表 示 找 到 文件 时 的 状态 。 


OOOODO 


【实践 案例 8-10】 

本 案例 通过 调用 update0 方 法 和 swapCache0 方 法 实现 更 新 本 地 缓存 的 功能 。 实 现 该 功 
能 的 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 h2 元 素 ， 该 元 素 用 于 显示 更 新 的 
标题 。 页 面具 体 代码 如 下 所 示 : 


(2) 窗 体 加 载 时 会 自动 调用 init0 函 数 ， 该 函数 实现 更 新 本 地 缓存 的 功能 。 其 具体 代码 
如 下 所 示 : 


上 述 代码 每 隔 5 秒 调 用 一 次 applicationCache 对 象 的 update0 方 法 ， 检 查 服务 器 上 的 
manifest 文件 是 否 更 新 ， 如 果 有 更 新 则 浏览 器 会 自动 下 载 该 文件 中 所 有 请 求 本 地 缓存 的 资 


第 
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源 文件 ， 当 这 些 资 源 文件 下 载 完毕 时 触发 updateready 事件 ， 询 问 是 否 立 刻 刷新 页 面 。 如 果 
用 户 选择 刷新 则 调用 swapCache0 方 法 手动 更 新 本 地 缓存 ， 更 新 完成 后 刷新 页 面 。 
(3) 运行 本 示例 的 代码 进行 测试 ， 其 最 终 运行 效果 如 图 8-20 所 示 。 


本 地 缓存 已 经 被 更 新 ， 秀 要 还 过 刷新 页 面 人 到 最 新 应 用 程序 版 
本 ， 是 否 副 新 ? 


口 停止 执行 此 页 面 中 的 车 Cw | 


图 8-20 触发 updateready 事件 时 的 运行 效果 


六 3 检测 网 络 的 当前 在 线 状态 一 


如 果 要 实现 浏览 器 与 服务 器 在 数据 交互 时 的 离线 应 用 ， 很 重要 的 一 个 步骤 是 获取 应 用 
的 在 线 状态 。 只 有 检测 出 页 面 的 在 线 状态 ， 才 会 在 离线 后 将 数据 保存 到 本 地 ， 上 线 时 再 将 
数据 保存 到 服务 器 ， 从 而 实现 离线 数据 的 交互 功能 。 

通过 navigator 对 象 的 onLine 属性 可 以 检测 当前 网 络 的 状态 ， 该 属性 的 基本 用 法 如 下 
所 示 : 


if (navigator.onLine) // 在 线 
alert ("当前 状态 : 在 线 "); 


else 


alert ("当前 状态 : 离线 "); 


由 于 onLine 属性 的 滞后 性 ， 它 往往 不 能 及 时 反馈 当前 网 络 的 状态 变化 。HIML 5 通过 
调用 online 事件 和 offline 事件 可 以 及 时 侦 测 网 络 在 线 与 离线 状态 。 

添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 p 元 素 显示 网 络 当 前 状态 。 页 面 代码 如 
下 所 示 : 


<body onLoad="init ();"> 

<h2> 检 测 网 络 当前 在 线 状态 </h2> 

<fieldset><legend> 检 测 网 路 当前 状态 </legend><p id="status"></p></fieldset> 
</body> 


页 面 加 载 时 调用 init0 函 数 ,在 该 函数 中 为 window 对 象 添 加 online 事件 和 offline 事件 。 
该 函数 的 具体 代码 如 下 所 示 : 


function init() 


' 


运行 上 述 代 码 进 行 测试 ， 具 体 效 果 不 再 显示 。 


8.5 拖 放 操作 


HTML 4 及 之 前 的 版 本 如 果 要 实现 文件 或 元 素 的 拖 放 操作 ， 需 要 结合 该 元 素 的 
onmousedown、onmousemove 和 onmouseup 等 多 个 事件 来 完成 。 但 是 HIML 5 中 直接 提供 
了 支持 拖 放 操作 的 API， 从 而 大 大 简化 了 拖 放 的 有 关 代 码 。 


8.5.1 拖 放 API 


如 果 将 HTML 5 中 某 个 元 素 的 draggable 属性 的 值 设 置 为 true, 该 元 素 就 可 以 实现 拖 动 
的 效果 ， 并 且 在 拖 放 过 程 中 也 能 触发 众多 的 事件 。 调 用 这 些 事件 可 以 更 加 准确 、 及 时 地 反 
映 元 素 从 拖 动 到 放下 这 一 过 程 的 各 种 状态 与 数据 值 。 表 8-4 列 出 了 执行 拖 放 操作 的 相关 事 
件 的 具体 说 明 。 


表 8-4 执行 拖 放 操作 的 常用 事件 


dragstart 被 拖 放 的 元 素 在 开始 拖 放 操 作 时 触发 
drag 被 拖 放 的 元 素 正在 拖 放 时 触发 
dragenter 拖 放 过 程 中 鼠标 经 过 的 元 素 在 被 拖 放 元 素 进入 某 元 素 时 触发 
dragover 拖 放 过 程 中 鼠标 经 过 的 元 素 在 被 拖 放 元 素 在 某 元 素 范 围 内 移动 时 触发 
dragleave 拖 放 过 程 中 鼠标 经 过 的 元 素 在 被 拖 放 元 素 移出 目标 元 素 时 触发 
drop 拖 放 的 目标 元 素 在 目标 元 素 完全 接收 被 拖 放 元 素 时 触发 
dragend 拖 放 的 对 象 元 素 在 整个 拖 放 操作 结束 时 触发 

【实践 案例 8-11】 


本 案例 通过 拖 动 元 素 显 示 在 页 面 中 所 触发 的 重要 事件 的 状态 。 其 具体 步骤 如 下 所 示 。 
(1) 添加 新 的 页 面 ， 在 页 面 中 添加 3 个 div 元 素 ， 它 们 分 别 表示 被 拖 放 的 元 素 、 当 前 
所 触发 的 重要 事件 状态 和 目标 元 素 。 页 面具 体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 init0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代 码 中 添加 页 面 的 dragover 事件 和 drop 事件 ， 它 们 都 使 用 e.preventDefault0 方 法 
取消 页 面 的 默认 值 ， 允 许 拖 放 页 面 。 由 于 在 拖 放 过 程 中 首先 被 拖 放 的 是 页 面 ， 如 果 页 面 都 
不 可 以 拖 放 ， 那 么 页 面 中 的 元 素 也 将 不 可 以 被 拖 放 。 然 后 再 分 别 为 拖 放 元 素 和 目标 元 素 添 
加 dragstart 事件 、drop 事件 和 dragleave 事件 ， 在 这 些 事件 中 通过 设置 innerHTML 属性 的 
值 显示 各 种 状态 。 

(3) 为 页 面 中 的 某 些 元 素 添加 样式 ， 其 主要 样式 代码 如 下 所 示 : 


(4) 运行 本 案例 的 代码 ， 拖 动 元 素 查 看 效果 ， 最 终 运 行 效果 如 图 8-21 所 示 。 
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图 8-21 拖 动 过 程 触 发 的 事件 


8.5.2 dataTransfer 对 象 


在 上 一 节 案 例 中 拖 放 元 素 还 没有 放 入 目标 元 素 中 ， 如 果 要 实现 这 个 功能 需要 调用 
dataTransfer 对 象 ，dataTransfer 对 象 专门 用 于 携带 有 拖 放 功 能 的 数据 。 
dataTransfer 对 象 包含 多 个 常用 属性 ， 表 8-5 对 这 些 属性 进行 了 具体 说 明 。 


表 8-5 dataTransfer 对 象 的 属性 


files 如 果 有 则 返回 被 拖 动 文件 的 FileList 清单 

types 返回 dragstart 事件 中 设置 的 数据 格式 ， 如 果 是 外 部 文件 的 拖 放 则 返回 files 

effectAllowed 返回 允许 执行 的 拖 放 操作 效果 , 它 的 值 包括 none、copy、copyLink、copyMove、 link、 
linkMove、move、all 和 uninitialized 


dropEffect 返回 已 选择 的 拖 动 效果 ， 如 果 该 操作 效果 与 起 初 设置 的 effectAllowed 效果 不 符 则 拖 
动 操作 失败 
items 返回 DataTransferItemList 对 象 ， 即 拖 动 数据 


effectAllowed 属性 和 dropEffect 属性 都 可 以 自 定 义 拖 放 过 程 中 的 效果 ， 但 
是 它们 绑 定 的 元 素 不 同 。effectAllowed 用 于 dragstart 事件 中 绑 定 被 拖 放 元 
素 ， 而 dropEffect 属性 用 于 绑 定 目标 元 素 。 该 属性 中 指定 的 效果 必须 在 
effectAllowed 属性 中 存在 ， 否 则 不 能 实现 自 定义 的 拖 放 效 果 。 


除了 属性 外 ，dataTransfer 对 象 也 包含 多 个 方法 ， 如 setData0、getData0 和 clearData() 
等 。 这 些 方法 的 具体 说 明 如 下 所 示 。 

口 setData(DOMString formabDOMString data) 为 元 素 添加 指定 数据 。 

口 getData(DOMString format) 返回 指定 的 数据 ， 如 果 数据 不 存在 则 返回 空 字 符 事 。 


口 setDragImage(Element img,long xlong y) 制定 拖 放 元 素 时 跟随 鼠标 移动 的 图 
片 ,， X 和 y 分 别 是 相对 于 鼠标 的 坐标 。 
口 clearData(DOMString formab 删除 指定 格式 的 数据 ， 如 果 未 指定 格式 则 删除 当 
前 元 素 的 所 有 携带 数据 。 
上 述 4 个 方法 使 用 了 format 作为 形 参 ， 它 表示 读 取 、 存 入 或 清空 时 的 数据 格式 。 该 参 
数 的 格式 包含 4 种 : textplain (文本 文字 格式 )、texthtml (HTML 页 面 代码 格式 )、text/xml 
(XML 字符 格式 ) 和 text/url-list (URL 格式 列表 )。 
【实践 案例 8-12】 
本 案例 主要 调用 dataTransfer 对 象 的 setData0 方 法 和 getData() 方 法 实现 拖 放 数据 的 效 
果 ， 调 用 setDragImage() 方 法 实现 设置 拖 放 图 标的 效果 。 其 主要 步骤 如 下 所 示 。 
(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 h2 元 素 和 div 元素。 页面 的 具体 
代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 preLoad0 函 数 ， 在 该 函数 中 获取 被 拖 动 的 元 素 和 目标 元 素 并 分 别 
为 它们 添加 事件 。 其 具体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


e.stopPropagation(); // 停 止 其 他 事件 的 进程 
} ,false) 7 
document .ondragover = function(e) 
{ 
e.preventDefault (); // 阻 止 默认 方法 ， 取 消 拒绝 被 拖 放 
} 
document .ondrop = function(e) 
{ 
e.preventDefault (); // 阻 止 默 认 方法 ， 取 消 拒 绝 被 拖 放 
} 


上 述 代码 为 被 拖 动 的 元 素 添加 dragstart 事件 ， 在 该 事件 中 通过 setDragImage() 方 法 设 
置 拖 放 图 标 ， 通 过 effectAllowed0 方 法 返回 拖 动 时 的 效果 ， 然 后 调用 setData0 方 法 癌 
dataTransfer 对 象 中 添加 拖 放 数据 。 接 着 为 目标 元 素 添加 dragover 事件 ， 在 该 事件 中 通过 
dropEffect 属性 设置 拖 动 的 效果 。 然 后 添加 目标 元 素 的 drop 事件 , 在 该 事件 中 调用 getData() 
方法 读 取 dataTransfer 对 象 中 的 拖 放 数据 ， 调 用 e.stopPropagation() 方 法 停止 其 他 事件 的 进 
程 ， 和 否则 目标 元 素 不 能 正常 接收 拖 放 来 的 数据 。 
(3) 为 页 面 的 元 素 添加 样式 代码 ， 其 主要 样式 代码 如 下 所 示 : 


阁 


-drag { 
-webkit-user-drag: element; 
-webkit-user-select: none; 


} 


(4) 运行 本 案例 的 代码 进行 测试 ， 拖 动 时 会 显示 拖 动 的 图 标 ， 拖 动 完 成 后 会 在 右 侧 显 
示 拖 放 的 数据 。 最 终 运行 效果 如 图 8-22 所 示 。 
7 orers 
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图 8-22 dataTransfer 对 象 的 运行 效果 


8.6 项 目 案例 : 将 图 片 拖 放 到 回收 站 


在 本 节 之 前 已 经 通过 大 量 的 实践 案例 详细 讲述 HTML 5 中 的 高 级 应 用 , 如 使 用 Google 


地 图 锁定 用 户 的 当前 位 置 、 使 用 Web Worker 处 理 线程 、 调 用 postMessage() 方 法 实现 跨 文 
档 消 息 传输 以 及 离线 应 用 程序 等 。 本 节 通 过 一 个 简单 的 项 目 案例 实现 将 图 片 拖 放 到 回收 站 
的 效果 。 

【实例 分 析 】 

本 项 目 案例 通过 拖 放 API 将 相册 中 的 某 张 图 片 以 拖 动 的 方式 放 入 回收 站 ， 从 而 实现 相 
册 管 理 功能 。 其 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页面 ， 在 页 面 的 合适 位 置 添加 3 个 div 元 素 ， 它 们 分 别 表 示 图 片 
列表 、 显 示 删 除 图 片 的 效果 以 及 显示 回收 站 。 然 后 向 第 一 个 div 元 素 中 添加 己 和 1 元 素 ， 
它们 实现 显示 多 张 图 片 的 效果 。 页 面具 体 代码 如 下 所 示 : 


(2) 页 面 加 载 时 调用 自 定义 的 init0 函 数 ， 该 函数 的 有 具体 代码 如 下 所 示 : 


上 述 代码 中 首先 声明 全 局 变量 intDeleNum, 该 变量 保存 删除 图 片 的 数量 。 接着 在 init0 
函数 中 通过 getElementsByTagName() 方 法 获取 相册 中 的 全 部 元 素 ， 然 后 在 遍历 全 部 元 素 时 
为 每 一 张 图 片 元 素 添 加 拖 动 时 触发 的 dragstart 事件 。 在 该 事件 中 调用 dataTransfer 对 象 存 
入 每 一 张 图 片 元 素 对 应 的 ID 号 ， 即 this.id 的 值 。 然 后 获取 ID 为 laji 的 目标 元 素 ， 向 该 元 
素 添加 drop 事件 , 在 该 事件 中 调用 getData0 读 取 存 入 的 单个 图 片 元 素 的 ID 号 , 将 该 铬 号 
作为 实 参 调用 Drop0 函 数 移 除 图 片 。 

(3) Drop0 函 数 通 过 removeChild() 方 法 移 除 相 册 中 指定 的 图 片 形 成 删除 的 效果 ， 同 时 
通过 全 局 变量 intDeleNum 累计 删除 图 片 的 数量 , 并 将 该 值 显示 到 页 面 中 。 该 函数 的 有 具体 代 
码 如 下 所 示 : 


(4) 通过 document 对 象 添 加 页 面 的 dragover 事件 和 drop 事件 ， 它 们 都 调用 
e.preventDefault() 方 法 取消 页 面 的 默认 值 。 其 具体 代码 如 下 所 示 : 


上 述 代码 添加 页 面 的 dragover 事件 和 drop 事件 ， 它 们 都 使 用 epreventDefault( 方 法 取 
消 页 面 的 默认 值 ， 允 许 拖 放 页 面 。 
(5) 为 页 面 中 的 元 素 添 加 样式 效果 ， 其 主要 的 样式 代码 如 下 所 示 : 


(6) 运行 本 案例 的 代码 进行 测试 ， 拖 动 删除 图 片 时 的 效果 如 图 8-23 所 示 。 删 除 图 片 成 
功 时 的 效果 如 图 8-24 所 示 。 
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图 8-23 ” 拖 动 删除 图 片 时 的 效果 图 8-24 删除 图 片 成 功 时 的 效果 
8.7 “习题 
一 、 填 空 题 
1. window .navigator 属性 中 包含 3 个 方法 ， 方法 可 以 获取 用 户 当 前 的 地 理 


位 置 。 
2. HTML 5 中 实现 跨 域 页 面 间 的 数据 互 访 需要 调用 对 象 的 方法 。 


Ee 文件 也 叫 清单 文件 ， 它 以 清单 的 形式 列举 了 需要 被 缓存 或 不 需要 被 缓存 


的 资源 文件 的 文件 名 称 。 
4。 清单 文件 中 声明 表示 离线 时 浏览 器 需要 缓存 到 本 地 服务 器 资源 的 文件 列表 。 
5，dataTransfer 对 象 的 方法 可 以 为 元 素 添加 指定 的 数据 。 

二 、 选 择 是 
1， 下 面 选项 中 ， 说 法 是 正确 的 。 


A. 


Bs 
C: 
DBD; 


postMessage() 方 法 只 能 实现 跨 域 页 面 间 的 数据 访问 功能 ， 实 现 其 他 功能 时 不 能 
调用 

获取 地 理 位置 时 position 对 象 的 latitude 属性 表示 获取 当前 位 置 的 经 度 
getCurrentPosition() 方 法 中 包含 3 个 参数 ， 这 3 个 参数 都 是 必 不 可 少 的 
getCurrentPosition() 方 法 中 包含 3 个 参数 ， 最 后 一 个 参数 表示 部 分 属性 内 容 ， 
可 以 省 略 


2. 后 台 线 程 调用 postMessage() 方 法 发 送 数据 后 ,前台 页 面 会 触发 message 事件 ， 并 且 
在 该 事件 中 获取 处 理 后 的 数据 。 下 段 代 码 空白 处 应 该 填写 a 


A. 
CC 


e.message B. event.message 
event.data D. e.data 


3. 关于 离线 应 用 程序 ， 下 面 选项 中 是 不 正确 的 。 


A. 
DB 


人 


D; 


applicationCache 对 象 代表 本 地 缓存 ， 它 允许 用 户 手动 更 新 本 地 缓存 
applicationCache 对 象 触发 noupdate 事件 返回 304 时 表示 没有 文件 更 新 ， 通 知 
浏览 器 直接 使 用 本 地 文件 

manifest 文件 是 一 个 简单 的 文本 文件 ， 所 以 在 保存 文件 时 可 以 将 扩展 名 设置 为 
“tt 
所 有 创建 文本 文件 的 编辑 器 都 可 以 新 建 manifest 文件 ,但 是 在 保存 文件 时 需要 
将 扩展 名 设置 为 “.manifest” 


» 


4. 目标 元 素 完全 接收 被 拖 放 元 素 时 触发 的 事件 是 


A 
(0 
5. 关于 upadte0 和 swapCache() 方 法 的 说 法 ， 选 项 
A. 


B. 


dragend B. drop 

dragstart D. dragover 

是 不 正确 的 。 

update0 和 swapCahce0 更 新 本 地 缓存 的 时 间 不 一 样 , update() 方 法 可 以 将 本 地 缓 
存 立 即 更 新 ， 比 swapCache0 方 法 要 早 

update0 和 swapCahce0 更 新 本 地 缓存 的 时 间 不 一 样 ，swapCache( 方 法 可 以 将 本 
地 缓存 立即 更 新 ， 比 update() 方 法 要 早 


. swapCache() 方 法 必须 在 updateready 事件 中 调用 , 而 update0 方 法 可 以 随时 调用 


第 Be 


HTML 5 的 高 级 应 用 


D. B 和 C 选 项 都 正确 
6. manifest 文件 中 如 果 开 头 没有 指定 任何 类 型 而 直接 写 入 资源 文件 的 话 ， 浏 览 器 会 自 


动 将 这 些 资源 文件 看 作 类 型 。 
A. CACHE MANIFEST B. CACHE 
C. FALLBACK D. NETWORK 
三 、 上 机 练习 E77 


1. 显示 用 户 当前 位 置 


添加 新 的 HTML 页 面 ， 该 页 面 通过 getCurrentPosition() 方 法 获取 当前 地 理 位 置 的 详细 
信息 ， 然 后 通过 使 用 Google 地 图 中 的 Google Map API 将 获取 的 位 置信 息 标 注 在 地 图 中 。 
最 终 运 行 效果 如 图 8-25 所 示 。 


图 8-25 ”显示 用 户 当前 位 置 


2. 拖 动 图 片 到 指定 位 置 


添加 新 的 HTML 页 面 , 在 该 页 面 中 添加 代码 实现 将 图 片 拖 动 到 指定 位 置 的 效果 。 用 户 
拖 动 时 的 效果 如 图 8-26 所 示 ， 拖 动 完成 后 的 效果 如 图 8-27 所 示 。 


二 人 2 司 本 加 | LE 


图 8-26” 拖 动 时 的 运行 效果 图 8-27” 拖 动 完成 后 的 效果 
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3. 使 用 线程 处 理 数 据 


添加 新 的 HTML 页 面 ， 在 该 页 面 中 提交 用 户 输入 的 数字 后 ， 调 用 后 台 线 程 进行 处 理 ， 
并 且 返 回 该 数字 的 平方 值 。 最 终 运 行 效果 如 图 8-28 所 示 。 


1 的 平方 是 : 121 


镁 和 数字 [| 


图 8-28 上 机 实践 3 运行 效果 


8.8 ”实践 疑难 解答 


8.8.1 Opera 浏览 器 如 何 清除 本 地 缓存 


创建 离线 应 用 程序 后 如 何 清除 Opera 浏览 器 的 本 地 缓存 
网 络 课堂 : http://bbs.itzcn.com/thread-19738-1-1.html 

【问题 描述 】: 各 位 好 ， 我 最 近 在 学 习 离 线 应 用 程序 的 有 关 知 识 ， 但 是 最 近 碰 到 了 一 个 
问题 , 使 用 Opera 浏览 器 测试 后 可 以 实现 在 本 地 缓存 资源 文件 的 功能 , 但 是 我 修改 HTML 5 
页 面 后 所 有 的 内 容 还 是 不 会 改变 ， 我 想 先 清 除 缓存 后 再 进行 测试 ， 可 是 不 知道 怎么 删除 本 
地 缓存 ? 求 大 家 帮忙 ， 谢 谢 ! 
【解决 办 法 】: 其 实 要 删除 Opera 浏览 器 中 的 缓存 数据 很 简单 ,以 Opera 12.02 版 本 为 例 ， 
单 击 菜单 下 【设置 】|【 删 除 私 人 数据 】 选 项 ， 打 开 【 删 除 私人 数据 】 对 话 框 ， 然 后 找到 详 
细 选 项 ， 选 中 要 删除 的 内 容 即 可 。 


8.8.2 ” 拖 动 操作 完成 后 如 何 显示 图 片 


HTML 5 中 拖 动 完成 后 显示 图 片 而 不 是 文字 
网 络 课堂 : http:Wbbs.itzcn.conythread-19739-1-1.html 


【问题 描述 】: 各 位 前 辈 好 , 我 最 近 在 使 用 HIML 5 中 的 拖 放 API 实现 元 素 的 拖 放 功能 
我 在 页 面 中 首先 定义 了 长 度 和 宽度 都 为 100 的 div 元 素 , 接着 又 定义 了 长 度 和 宽度 都 为 200 


的 div 元 素 。 然 后 分 别 为 这 两 个 元 素 指定 样式 ， 填 充 背景 色 ， 将 第 一 个 元 素 拖 动 到 第 二 个 
元 素 中 时 总 是 会 显示 拖 动 的 文字 而 不 是 图 片 ， 这 是 怎么 回 事 呢 ? 急 求 答案 ， 谢 谢 ! 我 的 代 
码 如 下 所 示 : 


【解决 办 法 】 这 位 同学 ， 这 个 问题 的 答案 很 简单 ， 你 使 用 setData0 方 法 添加 数据 时 应 
该 将 格式 设置 为 text/html 而 并 非 text/plain, text/html 的 数据 表示 以 HTML 页 面 代 码 格式 显 
示 。 修 改 后 主要 的 代码 如 下 所 示 : 


CSS 样式 和 (CSS 选择 器 
第 UY 章 


自从 CSS 诞生 以 来 ， 它 赁 着 简单 的 语法 、 绚 丽 的 效果 和 无 与 伦比 的 灵活 性 ， 为 Web 
的 发 展 做 出 了 不 可 庄 灭 的 贡献 。 

使 用 CSS 样式 设置 页 面 的 格式 , 可 以 将 格式 控制 代码 单独 存放 ， 对 页 面 样式 进行 统一 
管理 。 页 面 内 容 存 放 在 HTML 文档 中 ， 定 义 表现 形式 的 CSS 规则 在 HTML 文档 的 头 部 或 
另 一 个 文件 中 声明 。 将 内 容 与 表现 形式 的 声明 相 分 离 ， 不 仅 可 以 增加 页 面 的 可 维护 性 ， 还 
可 以 使 HTML 文档 代码 更 加 简练 , HTML 文档 结构 更 加 清晰 ， 而 且 能 有 效 地 缩短 浏览 器 的 
加 载 时 间 。 目 前 使 用 的 CSS 基本 上 都 是 从 CSS 2 规范 扩展 而 来 的 ， 它 不 仅 结构 庞大 而 且 比 
较 复 杂 。 而 CSS 3 作为 CSS 技术 的 升级 版 本 ， 朝 着 模块 化 方向 发 展 ， 使 整个 结构 更 加 灵活 
和 容易 扩展 。 本 章 将 从 CSS 的 背景 知识 开始 介绍 ， 然 后 对 CSS 3 新 增 的 选择 器 进行 详细 
介绍 。 


> 了 解 CSS 的 发 展 历史 

掌握 CSS 3 中 选择 器 的 基本 概念 

掌握 CSS 样式 的 使 用 

掌握 CSS 3 中 各 种 属性 选择 器 的 使 用 方法 
熟练 掌握 伪 元 素 选择 器 的 使 用 

掌握 使 用 结构 化 伪 类 选择 器 

熟练 使 用 content 插入 内 容 或 图 像 


VvvyvyvyYv 


9.1 CSS 简介 


CSS 是 Cascading Style Sheets( 层 人 车 样 式 表 ) 的 缩写 。 它 是 一 组 用 于 定义 Web 页 面 外 
观 格式 的 规则 。 在 网 页 制作 时 使 用 CSS 技术 ， 可 以 有 效 地 对 页 面 的 布局 、 字 体 、 颜 色 、 背 
景 和 其 他 效果 实现 更 加 精确 的 控制 。 


9.1.1 CSS 概述 


CSS 是 一 种 描述 性 的 文本 ， 用 于 增强 或 者 控制 网 页 的 样式 ， 并 允许 将 样式 信息 与 网 页 
内 容 相 分 离 。 存 放 CSS 样式 表 内 容 的 文件 扩展 名 为 “.css”。 
最 初 , HTML 标签 被 设计 为 定义 文档 结构 的 功能 , 通过 使 用 <h1>、<p>、<table>、<img> 


等 标签 ， 分 别 在 浏览 器 中 展示 一 个 标题 、 一 个 段落 、 一 个 表格 、 一 个 图 片 等 内 容 。 而 页 面 
中 内 容 的 布局 ， 由 浏览 器 根据 标签 表示 的 内 容 以 从 上 到 下 、 从 左 到 右 的 “ 流 ” 式 布局 依次 
排列 ， 如 果 想 要 对 内 容 进 行 定位 ， 则 需要 使 用 表格 进行 分 栏 控制 。 

HTML 只 是 标示 页 面 结构 的 标记 语言 。 而 Web 发 展 初期 的 两 大 浏览 器 厂商 Netscape 
和 Intemet Explorer 为 了 表现 更 加 丰富 的 页 面 效 果 ， 争 夺 Web 浏览 器 市 场 ， 不 断 地 添加 新 
的 标记 和 属性 到 HIML 规范 中 《比如 设置 文本 样式 的 font 元 素 )， 这 使 得 原本 结构 比较 清 
晰 的 HTML 文档 变 得 非常 混乱 。 

而 随 着 Web 页 面 效 果 的 要 求 越 来 越 多 样 化 ， 依 赖 HTML 的 页 面 表现 已 经 不 能 满足 网 
页 开发 者 的 需求 。 

CSS 的 产生 ， 改 变 了 传统 的 HTML 页 面 的 样式 效果 。CSS 规范 代表 了 Web 发 展 史上 
一 个 独特 的 阶段 。 


9.1.2 CSS 发 展 历史 


从 20 世纪 90 年 代 初 HIML 被 发 明 开始 ,样式 就 以 各 种 形式 存在 。 不 同 的 浏览 器 结合 
它们 各 自 的 样式 语言 为 用 户 提 供 页 面 效果 的 控制 。 最 初 的 HTML 只 含有 很 少 的 显示 属性 。 

为 了 满足 页 面 设计 者 的 要 求 , HTML 添加 了 很 多 显示 功能 。 但 是 随 着 这 些 功 能 的 增加 ， 
HTML 变 得 越 来 越 杂乱 ， 而 且 HTML 页 面 也 越 来 越 腔 肿 。 于 是 CSS 便 随 之 诞生 了 。 

1994 年 哈 坤 。 利 提出 了 CSS 的 最 初 建议 。 而 正巧 当时 伯 特 。 波 斯 (Bert Bos) 正在 设 
计 一 个 名 为 Argo 的 浏览 器 ， 于 是 他 们 决定 一 起 设计 CSS。 

其 实 当时 互联 网 行业 已 经 有 过 一 些 统一 样式 表 语言 的 建议 了 ， 但 CSS 是 第 一 个 含有 
“ 层 合 ”主意 的 样式 表 语 言 。 

在 CSS 中 , 一 个 文件 的 样式 可 以 从 其 他 的 样式 表 中 继承 下 来 。 读者 在 有 些 地 方 可 以 使 
用 他 自己 更 喜欢 的 样式 ， 在 其 他 地 方 则 继承 或 “ 层 攻 ”作者 的 样式 。 这 种 层 且 的 方式 使 作 
者 和 读者 都 可 以 灵活 地 加 入 自己 的 设计 ， 混 合 各 人 的 爱好 。 

哈 坤 于 1994 年 在 芝加哥 的 一 次 会 议 上 第 一 次 提出 了 CSS 的 建议 ，1995 年 他 与 波斯 一 
起 再 次 提出 这 个 建议 。 那 时 候 刚刚 建立 的 W3C 组 织 对 CSS 的 发 展 很 感 兴趣 ， 他 们 为 此 专 
门 组 织 了 一 次 讨论 会 。 哈 坤 、 波 斯 和 其 他 一 些 人 是 这 个 项 目的 主要 技术 负责 人 。1996 年 年 
底 CSS 初稿 已 经 完成 ， 同 年 12 月 CSS 规范 的 第 一 个 版 本 出 版 。 

1997 年 初 ，W3C 组 织 负责 CSS 的 工作 组 开始 讨论 第 一 版 中 没有 涉及 到 的 问题 。 其 讨 
论 结果 组 成 了 1998 年 5 月 出 版 的 CSS 规范 第 二 版 。 

CSS 3 标准 最 早 于 1999 年 开始 制订 ， 并 于 2001 年 初 提 上 W3C 研究 议程 。 在 2011 年 
6 月 7 日 W3C 发 布 了 第 一 个 CSS 3 建议 版 本 。CSS 3 的 重要 变化 是 采用 模块 来 增加 扩展 功 
能 ， 如 列表 模块 、 文 字 特 效 模块 、 多 栏 布局 模块 、 背 景 和 边框 模块 等 。 目 前 CSS 3 还 在 不 
断 完善 中 ， 会 有 更 多 的 新 模块 和 功能 被 加 入 。 


9.1.3 CSS 的 基本 使 用 


CSS 样式 表 是 为 Web 而 存在 的 ， 所 以 CSS 样式 终归 是 要 应 用 到 HTML 页 面 中 的 。 


与 传统 的 HTML 元 素 内 和风 的 样式 设置 方式 相 比 , CSS 样式 表 的 一 个 非常 重要 的 特点 就 
是 灵活 。 它 支持 将 CSS 样式 作为 属性 设置 到 页 面 元 素 中 ， 也 支持 将 CSS 样式 表 集 中 声明 
在 页 面 头 部 ， 还 支持 将 所 有 的 CSS 样式 表 内 容 存放 到 一 个 单独 的 文件 中 ， 并 在 HTML 页 
面 中 引入 。 

总 体 来 说 ，CSS 提供 了 以 下 3 种 使 用 CSS 样式 表 的 方式 ;使 用 内 部 CSS 样式 表 、 引 
入 外 部 样式 表 和 导入 外 部 样式 表 。 


[1， 使 用 内 部 CSS 样式 表 


内 部 样式 表 是 指 样式 表 的 定义 处 于 HTML 文件 一 个 单独 的 区 域 ， 与 HTML 的 具体 标 
签 分 离开 来 ， 从 而 可 以 实现 对 整个 页 面 范围 的 内 容 显示 进行 统一 的 控制 与 管理 的 功能 。 

内 部 样式 表 是 将 所 有 的 样式 声明 代码 放置 于 页 面 头 部 。 可 以 在 页 面 头 部 的 head 元 素 内 
部 添加 一 个 style 元 素 ， 用 于 存放 样式 表 配 置 。 

style 元 素 是 使 用 一 个 开始 标签 <style> 和 一 个 结束 标签 </style> 括 起 来 的 一 个 代码 段 。 元 
素 的 内 容 就 是 样式 表 的 所 有 配置 信息 .例如 ,将 页 面 body 内 所 有 文字 的 大 小 都 修改 为 28px， 
可 以 使 用 以 下 代码 实现 : 


内 部 样式 表 不 一 定 必须 写 在 HTML 文件 的 <head> 和 </head> 之 间 。 它 可 以 在 页 面 的 任 
何 位 置 ， 只 要 样式 表 本 身 的 语法 正确 ， 同 时 <style> 和 </style> 能 够 一 一 对 应 ， 对 整个 页 面 的 
样式 设置 就 可 以 生效 。 将 上 述 代码 中 有 关 样 式 的 部 分 转移 到 HTML 的 末尾 ， 处 于 </html> 
标签 后 面 ， 该 文件 在 Chrome 浏览 器 中 的 显示 效果 与 上 述 代码 的 执行 结果 是 一 致 的 。 

不 过 , 为 了 统一 ， 还 是 遵守 规定 ， 把 内 部 样式 表 都 放置 于 <head> 和 </head> 之 间 。 这 样 
做 也 符合 内 部 样式 表 诞生 时 的 初衷 ， 它 包含 了 关于 页 面 各 元 素 的 样式 信息 ， 放 在 页 面 的 前 
部 能 够 使 自己 和 他 人 在 阅读 代码 的 开始 阶段 就 对 整个 页 面 有 一 个 清晰 的 把 握 ， 一 目 了 然 。 
大 家 应 该 养 成 这 种 好 的 习惯 ， 遵 守 这 样 的 业内 规则 。 


2 引入 外 部 笠 式 表 


如 果 将 CSS 样式 表 声 明 的 代码 单独 放 在 一 个 扩展 名 为 “.css” 的 文本 文件 中 ， 可 以 在 
HIML 页 面 中 引入 该 样式 表 文 件 。 

样式 表 是 在 head 元 素 中 使 用 link 元 素 将 其 引入 ， 外 部 样式 表 文 件 的 名 称 设 置 为 link 
元 素 的 href 属性 的 值 即 可 。 

例如 ， 为 body 设置 字体 大 小 可 以 使 用 样式 表单 独 存放 样式 的 设置 信息 。 

可 以 先 新 建 一 个 名 为 fontsize.css 的 样式 表 文件 ， 内 容 如 下 所 示 : 


然后 使 用 link 元 素 将 上 述 文件 引入 到 HTML 页 面 中 ， 代 码 如 下 所 示 : 


导入 样式 表 的 方式 和 引入 样式 表 的 方式 差不多 。 它 们 都 是 将 样式 单独 存放 ， 然 后 在 
HTML 页 面 中 引入 该 样式 表 文 件 。 
导入 样式 表 可 以 在 style 元 素 之 间 使 用 @import 指令 。 例 如 下 面 的 代码 : 


任何 @import 规则 必须 出 现在 样式 表 中 的 所 有 规则 之 前 。@import 指令 的 参数 是 一 个 
CSS 样式 表 文 件 的 URL 地 址 ， 表 示 URL 地 址 的 字符 串 也 可 以 包含 在 url0 函 数 内 。 上 面 两 
个 @import 规则 实现 的 效果 是 相同 的 。 

在 一 个 单独 的 CSS 样式 表 文 件 中 , 也 可 以 使 用 @import 指令 将 另 一 个 CSS 样式 文件 导 
入 到 当前 文件 中 。 


9.2 CSS 3 选择 器 概述 


选择 器 是 CSS 3 中 一 个 重要 的 内 容 。 使 用 它 可 以 大 幅度 提高 开发 人 员 书 写 或 修改 样式 
表 的 工作 效率 。 

通过 使 用 选择 器 ， 不 再 需要 在 编辑 样式 时 使 用 多 余 的 或 者 没有 任何 语义 的 class 属性 ， 
而 可 以 直接 将 样式 与 元 素 绑 定 起 来 , 从 而 节省 在 网 站 或 Web 应 用 程序 完成 之 后 又 要 修改 样 
式 所 花费 的 大 量 时 间 。 

在 样式 表 中 ， 一 般 会 书写 大 量 的 代码 ， 在 大 型 网 站 中 ， 样 式 表 中 的 代码 可 能 会 达到 几 
千 行 ， 麻 烦 的 是 ， 当 整个 网 站 或 整个 Web 应 用 程序 全 部 书写 好 之 后 ， 需 要 针对 样式 表 进 行 
修改 时 ， 在 大 量 的 CSS 代码 中 ， 并 没有 说 明 什么 样式 服务 于 什么 元 素 ， 只 是 使 用 了 class 
属性 ， 然 后 在 页 面 中 指定 了 元 素 的 class 属性 。 使 用 元 素 的 class 属性 有 两 个 缺点 : 第 一 ， 
class 属性 本 身 没有 语义 ， 它 纯粹 是 用 来 为 CSS 样式 服务 的 ， 属 于 多 余 属性 ;第 二 ， 使 用 
class 属性 ， 并 没有 把 样式 与 元 素 绑 定 起 来 ， 针 对 同一 个 class 属性 ， 文 本 框 可 以 使 用 ， 下 
拉 框 也 可 以 使 用 ， 这 样 是 非常 混乱 的 ， 修 改 样式 也 不 方便 。 

所 在 ， 在 CSS 3 中 ， 提 倡 使 用 选择 器 来 将 样式 与 元 素 绑 定 起 来 ， 这 样 ， 在 样式 表 中 什 
么 样式 与 什么 元 素 相 匹配 变 得 一 目 了 然 ， 修 改 起 来 也 方便 。 不 仅 如 此 ， 通 过 选择 器 还 可 以 
实现 各 种 复杂 的 指令 ， 同 时 也 能 大 量 减 少 样式 表 的 代码 书写 量 ， 最 终 书写 出 来 的 样式 表 也 
会 变 得 简洁 明了 。 

有 具体 来 说 ， 使 用 选择 器 进行 样式 指定 的 时 候 ， 采 用 类 似 E[foo$="val"] 的 正则 表达 式 的 
形式 。 在 样式 表 中 ， 声 明 该 样式 应 用 于 什么 元 素 ， 该 元 素 的 某 个 属性 的 属性 值 是 什么 。 


例如 ， 指定 将 页 面 中 ig 为 “div_big” 的 div 元 素 的 背景 色 设置 为 红色 ,代码 如 下 所 示 : 
aivliq"divbig"]{background:red} 


这 样 ， 符 合 这 个 条 件 即 id 为 “div_big” 的 div 元 素 的 背景 色 会 被 设置 为 红色 ， 不 符合 
这 个 条 件 的 div 元 素 则 不 使 用 这 个 样式 。 

另外 ， 还 可 以 在 指定 样式 的 时 候 使 用 “^” 通 配 符 ( 开 头 字 符 匹 配 )、“$” 通 配 符 〈( 结 
尾 字符 匹配 ) 与 “*” 通 配 符 (包含 字符 匹配 )。 

例如 ， 指 定 id 末尾 字母 为 “t” 的 div 元 素 的 背景 色 为 蓝 色 ， 代 码 如 下 所 示 : 


aiviias="t"]{backgroumnd:blues} 
通配符 的 使 用 更 加 提高 了 样式 表 的 书写 效率 。 


9.3 ”属性 选择 器 


选择 器 是 W3C (World Wide Consortium) 在 CSS 3 的 工作 草案 中 独立 引进 的 一 个 概念 ， 
它 是 CSS 3 的 重要 组 成 部 分 。 实际 上 , 在 CSS 1 和 CSS 2 中 已 经 定义 了 很 多 常用 的 选择 器 ， 
CSS 3 新 增 了 3 种 属性 选择 器 : [att*=val] 属 性 选择 器 、[att^=val] 属 性 选择 器 和 [att$=val] 属 
性 选择 器 。 本 节 将 详细 介绍 这 3 种 选择 器 。 


9.3.1 [att*=val] 属 性 选择 器 


[att*=val] 属 性 选择 器 的 含义 是 : 选择 匹配 的 元 素 ， 该 元 素 定 义 了 att 属性 ， 且 属性 值 是 
包含 val 的 字符 串 。 例 如 ，div[id*=section1] 表 示 匹 配 包含 id 属性 ， 且 id 的 属性 值 包含 
“section1 ”字符 串 的 div 元 素 。 

【实践 案例 9-1】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 匹配 id 的 属性 值 是 包含 “mian” 字 符 串 的 所 有 
Pp 元 素 。 其 主要 代码 如 下 所 示 : 


ES 


CSS 样式 和 CSS 选择 器 


然 ， 稀 落 的 人 群 凋零 了 思绪 的 花 凑 。 

</p> 

<p id="mianl"> 
帐 然 间 ， 我 张开双 臂 拥抱 这 秋天 的 夜空 ， 想 感怀 一 下 </br>" 中 秋月 圆 "的 慨 意 ， 可 是 的 空旷 的 心 
情 如 稀疏 的 星光 一 </br> 样 散落 一 地 ， 踩 过 自己 的 影子 被 昏暗 的 光亮 拉 的 很 长 很 长 ….… 

</p> 


<p id=old1> 285) 
岁月 的 流失 ， 带 走 了 我 们 豆蔻 年 华 的 莲 勃 ， 暗 痰 了 那些 年 轻 绚丽 的 色 </br> 
彩 ， 远 远 的 街灯 在 深造 的 夜色 中 孤独 ， 窗 外 ， 万 家 灯火 的 隐隐 约 约 在 </br> 
这 迷蒙 的 天 幕 上 添 了 一 份 沉重 。 
</p> 
<p id=mian2> 
留 下 的 也 只 是 一 些 记忆 的 碎片 ， 如 锋 心 于 曾经 的 温柔 ，</br> 
执着 于 缠绵 的 初衷 ， 随 着 季节 的 轮回 被 尘埃 层 层 覆盖 。 
</p> 
</body> 


在 上 段 代码 中 ， 匹 配 出 所 有 符合 条 件 〈 即 p 元 素 中 属性 中 包含 id， 并 且 属 性 值 包含 
“mian” 的 p 元 素 , 将 字体 颜色 设置 为 “#C6C” 并 且 设置 字体 为 “Arial”, 左边 距 为 “60px”。 
运行 效果 如 图 9-1 所 示 。 
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失 ， 带 走 了 我 们 豆 功 年 华 的 迁 勃 ， 呈 失 了 好 关外 和约 国 的 名 
的 夜色 中 孤独 ， 窗 外 ， 万 家 灯火 的 隐隐 约 约 在 . 
一 份 沉重 ， 生 活 中 许多 闪烁 的 朋 间 ， 全 各 有 


图 9-1 [att*=val] 属 性 选择 器 效果 图 


9.3.2 [att^=val] 属 性 选择 器 


[att^=val] 属 性 选择 器 的 含义 是 : 如 果 该 元 素 定义 了 att 属性 ， 并 且 属 性 值 是 以 val 开头 
的 字符 串 ， 则 该 元 素 使 用 这 个 样式 。 例 如 ，div[id^=section] 表 示 匹 配 包含 id 属性 ， 且 id 属 
性 值 是 以 “section” 字 符 串 开头 的 div 元 素 。 


【实践 案例 9-2】 
在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 匹 配 id 的 属性 值 是 以 “mian” 开 头 的 所 有 p 
元 素 。 其 主要 代码 如 下 所 示 : 


在 上 述 代码 中 ， 使 用 [att^=val] 选 择 器 ， 查 找 出 所 有 符合 条 件 的 p 元 素 ， 并 设置 字体 为 
“Arial”， 大 小 为 “20px”， 颜 色 为 “#03F”， 上 边 距 为 “20px”， 左 边 距 为 “150px”。 运 行 
效果 如 图 9-2 所 示 。 
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qi 名 
在 古 着 隙 神话 中 ， 攻 项 集 爱 与 半 丁 一 身 > 
既是 美神 的 化 身 ， 又 溶 进 了 爱 神 的 血液 S 


玫瑰 是 用 来 表达 爱情 的 通用 语言 
玛 瑰 代表 妥 情 ， 但 不 同 颜色 、 打 数 的 下 现 by 
还 另 有 训 意 


9-2 [att*=val] 属 性 选择 器 效果 图 


9.3.3 [att$=val] 属 性 选择 器 


[att$=val] 属 性 选择 器 的 含义 是 : 如 果 元 素 中 定义 了 att 属性 ， 且 属性 值 是 以 val 结尾 的 
字符 串 ， 则 该 元 素 使 用 这 个 样式 。 例 如 ，div[id$=section] 表 示 匹 配 包含 id 属性 ， 且 id 属性 
值 是 以 “section” 字 符 串 结尾 的 div 元 素 。 

【实践 案例 9-3】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 匹 配 id 的 属性 值 是 以 “mian” 结 尾 的 所 有 p 
元 素 。 其 主要 代码 如 下 所 示 : 


在 上 述 代码 中 ， 使 用 [att$=val] 选 择 器 ， 查 找 出 所 有 符合 条 件 的 p 元 素 ， 并 设置 字体 为 
“Arial”， 大 小 为 “20px”， 颜 色 为 “ 扼 3F”， 上 边 距 为 “20px”， 左 边 距 为 “150px”。 运 行 
效果 如 图 9-3 所 示 。 


玫瑰 是 用 来 表达 爱情 的 通用 语言 
列表 爱情 ， 但 不同 关 名， 不 妆 内 下 殉 示 另 有 


图 9-3 [att$=val] 属 性 选择 器 效果 图 


9.4 伪 元 素 选 择 器 


所 谓 伪 元 素 选 择 器 ， 是 指 并 不 是 针对 真正 的 元 素 使 用 的 选择 器 ， 而 是 针对 CSS 中 已 经 
定义 好 的 伪 元 素 使 用 的 选择 器 。 在 CSS 中 ， 主 要 有 如 下 4 个 伪 元 素 选 择 器 : 

口 first-line 伪 元 素 选择 器 ”用 于 为 某 个 元 素 中 的 第 一 行文 字 设置 样式 。 

口 first-letter 伪 元 素 选择 器 用 于 为 某 个 元 素 中 的 文字 的 首 字母 或 第 一 个 字 设 置 

样式 。 

口 ”before 伪 元 素 选择 器 用 于 在 某 个 元 素 之 前 插入 一 些 内 容 。 

口 after 伪 元 素 选择 器 用 于 在 某 个 元 素 之 后 插入 一 些 内 容 。 

下 面 详 细 介绍 这 4 种 伪 元 素 选择 器 。 


9.4.1 first-line 和 first-letter 选择 器 


first-line 伪 元 素 选择 器 用 于 为 某 个 元 素 中 的 第 一 行文 字 设 置 样式 ，first-letter 伪 元 素 选 
择 器 用 于 为 某 个 元 素 中 的 文字 的 首 字母 或 第 一 个 字 设置 样式 。 

【实践 案例 9-4】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 在 该 页 面 中 有 一 个 p 元 素 ， 在 该 元 素 内 存在 两 
行文 字 ， 使 用 first-line 伪 元 素 选 择 器 将 第 一 行文 字 设置 为 红色 ， 字 体 大 小 为 20px。 另 外 还 
有 一 个 div 元 素 , 使 用 first-letter 伪 元 素 选择 器 设置 这 两 段 文 字 的 开头 文字 或 字母 的 颜色 为 
红色 ， 字 体 大 小 为 20px。 代 码 如 下 所 示 : 


ES 


CSS 样式 和 CSS 选择 器 


} 
div:first-lettert{ 
Color:#F39; 
font-size:20px; 
} 
</style> 


</head> 289) 


<body > 

<p> 我 想 还 是 小 时 候 好 啊 <br /> 

我 怀念 那 时 我 们 的 纯洁 那 时 我 们 家 园 的 美丽 </p> 

<div >Whatever is worth doing is worth doing well. 
</div> 

</body> 


上 述 代码 的 执行 结果 如 图 9-4 所 示 。 


我 怀念 那 时 我 们 的 纯洁 那 时 我 们 家 园 的 美丽 


hatever is worth doing is wcrth doing well. 


眼睛 亮 得 像 璀 颗 明亮 的 星星 ， 


景 显示 所 有 下 载 内 容 ， X 


图 9-4 ”first-line 和 first-letter 伪 元 素 选 择 器 执行 效果 


9.4.2 ”before 选择 器 


before 伪 元 素 选择 器 用 于 在 某 个 元 素 之 前 插入 一 些 内 容 ， 使 用 方法 如 下 所 示 : 


< 元 素 >:before 
{ 
content :插入 文字 
} 
< 元 素 >:before 
{ 


Content :url (test .wav) 


其 中 ，before 表示 在 元 素 前 面 插入 内 容 ; content 属性 用 来 定义 要 插入 的 内 容 。 

【实践 案例 9-5】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 实 现 使 用 before 选择 器 在 元 素 前 面 插入 内 容 的 
功能 ， 其 代码 如 下 所 示 : 


上 述 代 码 针 对 p 元 素 使 用 before 选择 器 ， 并 且 使 用 content 属性 来 定义 p 元 素 前 面 插 
入 的 内 容 “ 临 近 中 秋 , ”。 在 before 选择 器 中 ， 指 定 文字 的 颜色 为 “#C06”。 运 行 效果 如 图 
9-5 所 示 。 


如 鼓 满 了 诗情画意 


St ee 
区 和 对 聘 ， 也 怀 可 交 过 隐 卫星 的 天 列 结 


蓝 的 中 秋 夜 空 。 
古今 的 人 们 ， Pe 


A ee 
着 圆 圆 的 汤圆 , 连 那 思 ; 
的 和 霸 


注定 之 名 类 为 计 昌 马 
加 入 我 i 算 

个 际 入 玫 魏 坟 各 
高 为 注油 迪 应 垃 
dae 


9-5 before 选择 器 执行 效果 


9.4.3 after 选择 器 


after 伪 元 素 选择 器 用 于 在 某 个 元 素 之 后 插入 一 些 内 容 。 

【实践 案例 9-6】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 , 更 改 上 节 示 例 的 样式 代码 , 实现 使 用 after 选择 
器 在 元 素 后 面 插入 内 容 的 功能 。 其 代码 如 下 所 示 : 


上 述 代码 针对 p 元 素 使 用 after 选择 器 ， 并 且 使 用 content 属性 来 定义 p 元 素 后 面 插入 
的 内 容 “ 圆 圆 的 月 亮 ， 寄 托 着 美满 生活 的 梦想 。”， 指 定 文字 的 颜色 为 #C06。 运 行 效果 如 图 
9-6 所 示 。 
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国生 苑 裤 月 
国 石 下 洪 训 
解 融 访 痊 中 
大 和 其 揽 下 
妆 并 缘 电 全 | 
同 见 进 无 家 
管子 追 地 曾 
到 月 
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图 9-6 after 选择 器 执行 效果 


9.5 ”结构 化 伪 类 选择 器 


在 CSS 中 , 可 以 使 用 类 选择 器 把 相同 元 素 定义 成 不 同 的 样式 , 例如 , 针对 一 个 p 元 素 ， 
可 以 做 如 下 所 示 的 定义 : 


然后 在 页 面 上 对 p 元 素 使 用 class 属性 , 把 定义 好 的 样式 指定 给 具体 的 p 元素 , 代码 如 


下 所 示 : 


在 CSS 中 , 除了 上 面 所 述 的 类 选择 器 之 外 ， 还 有 一 种 伪 类 选择 器 ， 这 种 伪 类 选择 器 与 

类 选择 器 的 区 别 是 : 类 选择 器 可 以 随便 命名 ， 例 如 上 面 的 “pright” 与 “p.center”， 也 可 以 

命名 为 “p.class1” 与 “p.class2”， 然 后 在 页 面 上 使 用 “class=“class1” ”与 “class= “class2””， 

但 是 伪 类 选择 器 是 CSS 中 已 经 定义 好 的 选择 器 ， 不 能 随便 命名 。 结 构 性 伪 类 选择 器 是 

CSS 3 中 新 增加 的 类 型 选择 器 。 常 用 的 结构 性 伪 类 选择 器 如 下 所 示 : 

root 选择 器 ”将 样式 绑 定 到 页 面 的 根 元 素 中 。 

first-child 选择 器 ”对 父 元 素 中 的 第 一 个 子 元 素 指定 样式 。 

last-child 选择 器 对 父 元 素 中 的 最 后 一 个 子 元 素 指定 样式 。 

nth-child(m) 选 择 器 对 指定 序号 的 子 元 素 设置 样式 ( 正 数 )。 参 数 可 以 是 数字 ( 如 

1、2、3 )、 关 键 字 (如 odd、even )、 公 式 (如 2n、2n+3 )， 参 数 的 索引 起 始 值 是 

1， 而 不 是 0。 

口 、nth-last-child(n) 选 择 器 ”对 指定 序号 的 子 元 素 设置 样式 (倒数 ), 语法 和 用 法 可 参 
考 nth-child(n) 选 择 器 。 

口 not 选择 器 若 想 对 某 个 结构 元 素 使 用 样式 , 但 想 排除 这 个 结构 元 素 下 的 子 结构 元 
素 ， 就 用 not 选择 器 。 

口 empty 选择 器 ”指定 当 元 素 内 容 为 空白 时 使 用 的 样式 。 

口 target 选择 器 对 页 面 中 某 个 target 元 素 指 定 样式 ,该 样式 只 在 用 户 单 击 了 页 面 中 
的 链接 ， 并 且 跳 转 到 target 元 素 后 生效 。 

口 nth-of-type(m) 选 择 器 匹配 指定 序号 的 同一 种 类 型 的 子 元 素 ( 正 数 )。 参数 可 以 是 
数字 (如 1、2、3 )、 关 键 字 (如 odd、even )、 公 式 (如 2n、2n+3 )， 参 数 的 索引 
起 始 值 是 1， 而 不 是 0。 

口 、nth-of-type(n) 选 择 器 ”匹配 指定 序号 的 同一 种 类 型 的 子 元 素 (倒数 ), 语法 和 用 法 
参考 nth-of-type(n) 选 择 器 。 

口 ”only-child 选择 器 ” 当 某 个 父 元 素 中 只 有 一 个 子 元 素 时 使 用 的 样式 。 


9.5.1 root 选择 器 


OOODO 


root 选择 器 将 样式 绑 定 到 页 面 的 根 元 素 中 。 所 谓 根 元 素 ， 是 指 位 于 文档 树 中 最 顶层 结 
构 的 元 素 ， 在 HTML 页 面 中 就 是 指 包含 着 整个 页 面 的 “<html>” 部 分 。 

【实践 案例 9-7】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 实 现 使 用 root 选择 器 改变 整个 HTML 页 面 背 
景 颜色 的 功能 ， 其 代码 如 下 所 示 : 


第 中 


CSS 样式 和 CSS 选择 器 


body{ 
background-color:#F99; 

六 

</style> 

</head> 

<body> 

<h3> 一 份 寄居 于 笔下 的 情怀 </h3> 293) 

<p> 

冷 月 星 撒 照 顶 ， 冰 清冷 淡 的 夜色 ， 似 镜 破碎 般 揪 碎 了 我 的 心 ， 望 眼 天 边 烟 过 了 几 番 云 月， 投射 在 眼 

波 却 如 此 惨淡 。 只 因 想 你 ， 我 落笔 成 思 ， 擒 一 缕 清 风 ， 化 作 寥寥 的 情 悚 ， 寄 托 在 你 身 旁 。 一 题记 

一 帘 思 念 帷 慢 ， 静 扰 了 我 的 清 梦 ; 一 曲 离别 琴 伤 ， 拨 乱 了 我 的 心弦 ; 一 复 丹 青 妙 笔 挥 断 了 一 生 的 

息 ; 一 抹 着 美 倾城 ， 消 让 了 无 言 的 寂寥; 一 语 珍重 天 涯 ， 慕 散 了 谁 的 感伤 ? 
</p> 
</body> 


上 述 代码 中 使 用 root 选择 器 将 整个 网 页 的 背景 色 设置 为 蓝 色 ， 将 网 页 中 的 body 元 素 
的 背景 色 设置 为 粉色 。 运 行 效果 如 图 9-7 所 示 。 


一 份 奇 居 于 笔下 的 情怀 


了 星 撒 照 顶 ， 冰 清 沦 痰 的 夜色 ， 似 镜 破碎 般 所 碎 了 我 的 心 ， A 几 重 云 月 ， re 
我 落笔 成 思 ， 携 一 线 清 风 ， 化 作 富 灾 的 情 司 ， 等 托 在 你 身 旁 一 一 念 帷 幅 ， 静 扰 了 5 
全 心 该 ， 一 竺 入 青 妙笔 ， 挥 电 了 一 生 的 情 起 ， 和 A 的 寂 灾 ， 一 语 珍 重 天 


图 9-7 root 选择 器 执行 效果 
另外 ， 在 使 用 样式 指定 root 元 素 的 背景 时 ， 根 据 不 同 的 指定 条 件 ， 背 景色 的 显示 范围 
会 有 所 变化 。 在 上 面 的 示例 中 ， 如 果 采 取 如 下 所 示 的 样式 ， 不 使 用 root 选择 器 来 指定 root 
元 素 的 背景 色 ， 只 指定 body 元 素 的 背景 色 ， 则 整个 页 面 就 全 部 变 成 粉色 的 了 。 


<style type="text/css"> 

body{ 
background-color:#F99; 

} 

</style> 


删除 root 选择 器 后 的 页 面 如 图 9-8 所 示 。 


ile:///C:/Docunents%20and%20Settings /hdninistrator/Ny%20Docunents/root. htnl 


一 份 奇 居于 笔下 的 情怀 


冷 月 星辰 照 顶 ， 冰 清冷 淡 的 夜色 ， 似 恒 破 碎 般 抵 雁 了 我 的 心 ， 2 K 边 烟 过 了 几 盔 云 月 ， Ee 
想 你 ， 我 的 全 清风 站 奇 江 在 | 


图 9-8 ”删除 root 选择 器 后 的 执行 效果 


9.5.2 ”not 选择 器 


如 果 想 对 某 个 结构 元 素 使 用 样式 ， 但 是 想 排除 这 个 结构 元 素 下 面 的 子 结构 与 元 素 ， 让 
它 不 使 用 这 个 样式 时 ， 就 可 以 使 用 not 选择 器 。 

【实践 案例 9-8】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 其 代码 如 下 所 示 : 


在 上 述 代 码 中 ,“body *” 指 定 body 元 素 中 所 有 的 字体 颜色 为 “#60F”， 字 体 大 小 为 
16px,“:not(h3)” 表 示 使 用 not 选择 器 排除 h3 元 素 。 也 就 是 说 ， 除 了 h3 元 素 外 ， 整 个 页 
面 中 的 其 他 元 素 全 部 使 用 上 述 样式 。 运 行 效果 如 图 9-9 所 示 。 


口 无 标题 文档 x 
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四 叶 草 的 传说 


要 外 美加 传说 由 叶 的 二 叶 划 


9-9 not 选择 器 执行 效果 


9.5.3 first-child 和 last-child 选择 器 


如 果 用 户 要 为 文章 列表 的 第 一 篇 标题 和 最 后 一 篇 标题 设置 不 同 的 背景 颜色 ， 可 以 采取 
的 做 法 是 : 给 这 两 篇 文章 的 标题 添加 不 同 的 class 属性 , 然后 给 每 个 属性 的 样式 定义 不 同 的 
背景 颜色 。 但 是 ， 在 CSS 3 中 新 增加 了 first-child 选择 器 和 last-child 选择 器 以 后 ， 同 样 可 
以 解决 设置 背景 颜色 的 问题 ， 多 余 的 class 属性 就 可 以 不 要 了 。 

first-child 选择 器 和 last-child 选择 器 分 别 用 于 为 父 元 素 中 的 第 一 个 或 者 最 后 一 个 子 元 
素 设置 样式 。 

【实践 案例 9-9】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ,使 用 选择 器 实现 设置 文章 标题 背景 颜色 的 功能 ， 
其 代码 如 下 所 示 : 


上 述 代码 使 用 first-child 选择 器 设置 第 一 个 标题 背景 颜色 为 “十 30”， 最 后 一 个 标题 背 
景 颜 色 为 “#06F”。 运 行 效果 如 图 9-10 所 示 。 
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全 二 早已 若 代 而 未 


第 二 名 i 人 生 总 有 许多 意外 ， 担 在 
手 硬 而 的 风 等 也 


第 三 句 撞 丰 到 有 的 星星 , 总 是 最 门 元 的 。 管 缠 的 小 鱼 ,总 是 录 半 丽 的 。 庄 过 的 电影 总 是 最 


| 第 一 间 记性 的 ,是 不 是 永远 不 会 石 记 了 我 守 六 如 交 汪 能 地 们 的 曹 话 ， 块 东 才刚 Ff 牛 ， 藻 
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第 正 铝 以 为 有 了 总 用 ;以 为 也 驴 之 后 ,本 
PE es. 


9-10 ”first-child 和 last-child 选择 器 效果 图 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


另外 , 如 果 页 面 中 具有 多 个 div 元 素 , 则 该 first-child 选择 器 与 last-child 选择 器 对 所 有 
div 元 素 都 适用 ， 代 码 如 下 所 示 : 


<body> 

<div> 

<p> 第 一 句 记 住 的 ， 是 不 是 永远 不 会 忘记 ? 我 守护 如 泡沫 般 灿 烂 的 童话 ， 快 乐 才刚 刚 开 始 ， 翡 
伤 却 早已 潜伏 而 来 。</p> 

<p> 第 二 名 。” 人 生 总 有 许多 巧合 ， 两 条 平行 线 也 可 能 会 有 交汇 的 一 天 。 人 生 总 有 许多 意外 ， 握 在 手 
里 面 的 风筝 也 会 突然 断 了 线 。</P> 

<p> 第 三 句 ” 摘 不 到 的 星星 ， 总 是 最 闪 亮 的 。 溜 掉 的 小 鱼 ， 总 是 最 美丽 的 。 错 过 的 电影 ， 总 是 最 
好 看 的 。</p> 

</div> 

<div> 

<p> 第 四 名 ”以 为 有 了 翅膀 ， 就 会 变 成 一 只 鸟 ; 以 为 变 成 鸟 之 后 ， 就 可 以 拥有 自由 。 而 今 ， 拥 有 
了 期 盼 的 翅膀 ， 却 只 能 在 小 小 的 空间 里 ， 飞 翔 ， 遗 失 了 自由 。</p> 

<p> 第 五 句 。 我 们 都 要 尽量 靠近 光亮 ， 让 心情 温暖 。</p> 


</div> 


上 述 代码 执行 结果 如 图 9-11 所 示 。 


口 无 标题 文档 
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第 二 句 人 生 总 有 许多 巧合 ， TN 天 人 生 总 有 许多 意 
外 ， 所 在 手 时 而 的 风 竺 也 会 突 灼 其 了 
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图 9-11 多 个 div 元 素 中 使 用 first-child 与 last-child 选择 器 


9.5.4 nth-child(n) 和 nth-last-child(n) 选 择 器 


使 用 nth-child 选择 器 与 nth-last-child 选择 器 ， 不 仅 可 以 指定 某 个 父 元 素 中 第 一 个 子 元 
素 以 及 最 后 一 个 子 元 素 的 样式 ， 还 可 以 针对 父 元 素 中 某 个 指定 序号 的 子 元 素来 指定 样式 。 
这 两 个 选择 器 是 first-child 及 last-child 的 扩展 选择 器 。 这 两 个 选择 器 的 样式 指定 方法 如 下 
所 示 : 

nth-child(n){ 

3 

< 子 元 素 >:nth-last-child (n){ 

} 


将 指定 序号 写 在 “nth-child” 或 “nth-last-child” 后 面 的 括号 中 ， 例 如 , “nth-child(3)” 
表示 第 3 个 子 元 素 ,“nth-last-child(3)” 表 示 倒 数 第 3 个 子 元 素 。 

【实践 案例 9-10】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 添 加 一 个 表格 ， 使 用 nth-child 选择 器 和 
nth-last-child 选择 器 实现 隔行 分 色 的 功能 。 其 代码 如 下 所 示 : 


上 述 代 码 中 tr:nth-last-child(odd) 将 表格 的 奇数 行 背景 色 设置 为 “#EFF”,tr:nth-child(even) 
将 表格 的 偶数 行 背景 色 设 置 为 “#999”， 其 执行 结果 如 图 9-12 所 示 。 


图 9-12 设计 优雅 的 数据 表格 


9.5.5 nth-of-type(n) 和 nth-last-of-type(n) 选 择 器 


上 一 节 介 绍 了 nth-child 选择 器 与 nth-last-child 选择 器 ， 但 是 这 两 个 选择 器 在 用 于 某 些 
元 素 时 ， 会 产生 一 些 问题 ， 首 先 来 看 究竟 会 产生 什么 问题 。 

【实践 案例 9-11】 

以 下 HTML 代码 中 ， 存 在 一 个 div 元 素 ， 在 该 div 元 素 中 ， 给 出 了 几 篇 文章 的 标题 与 
每 篇 文章 的 正文 。 

为 了 让 第 奇数 篇 文章 的 标题 与 第 偶数 篇 文章 的 标题 的 背景 色 不 一 样 ， 首 先 使 用 
nth-child 选择 器 来 进行 指定 ， 指 定 第 奇数 篇 文章 的 标题 背景 色 为 “#999”， 第 偶数 篇 文章 的 
标题 背景 色 为 “ 手 09”。 其 代码 如 下 所 示 : 


在 浏览 器 中 查看 该 页 面 的 运行 结果 ， 如 图 9-13 所 示 。 
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不 知 什么 时 候 开始 很 喜欢 纵情 山水 ， 兴 许 是 出 生 在 山里 的 纤 故 。 


不 要 怪我 在 你 的 视线 中 消失 ， 我 的 脚步 从 来 就 是 这 样 缓慢 。 


这 是 个 流 火 的 人 间 七 月 ， 芍 浪 一 波 波 来 效 。 让 我 不 敢 外 出 面 对 骄 阳 


图 9-13 ”使 用 nth-child 选择 器 效果 


运行 结果 并 没有 如 预期 的 那样 ， 让 第 奇数 篇 文章 的 标题 背景 色 为 “#999”， 第 偶数 篇 
文章 的 标题 背景 色 为 “三 09”。 

上 述 问 题 产 生 的 原因 是 ，nth-child 选择 器 在 计算 子 元 素 是 第 奇数 个 元 素 还 是 第 偶数 个 
元 素 的 时 候 ， 是 连同 父 元 素 中 的 所 有 子 元 素 一 起 计算 的 。 也 就 是 说 ,“h2:nth-child(odd)” 
并 不 是 指 “ 针 对 div 元 素 中 第 奇数 个 h2 子 元 素来 使 用 ”， 而 是 指 “ 当 div 元 素 中 的 第 奇数 
个 子 元 素 是 h2 子 元 素 的 时 候 使 用 ”。 

所 以 ， 在 上 面 这 个 示例 中 ， 因 为 h2 元 素 与 p 元 素 相互 交错 ， 所 有 h2 元 素 都 处 于 奇数 
位 置 ， 所 以 所 有 h2 元 素 的 背景 色 都 变 成 了 “#999”， 而 处 于 偶数 位 置 的 p 元 素 ， 因 为 没有 
指定 第 偶数 个 位 置 的 子 元 素 的 背景 色 ， 所 以 没有 发 生变 化 。 

在 CSS 3 中 ， 使 用 nth-of-type 选择 器 与 nth-last-of-type 选择 器 可 以 避免 这 类 问题 的 产 
生 。 使 用 这 两 个 选择 器 的 时 候 ，CSS 3 在 计算 子 元 素 是 第 奇数 个 子 元 素 还 是 第 偶数 个 子 元 
素 时 ， 只 针对 同类 型 的 子 元 素 进行 计算 。 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 更 改 上 面 的 实例 ， 实 现在 div 父 元 素 中 改变 子 
元 素 h2 奇数 行 和 偶数 行 字体 颜色 的 功能 ， 其 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


} 

</style> 

上 述 代 码 使 用 nth-of-type 选择 器 将 所 有 奇数 行文 章 标题 的 字体 颜色 设置 为 “#999”， 
将 所 有 偶数 行文 章 标题 的 字体 颜色 设置 为 “ 纤 09”。 运 行 效果 如 图 9-14 所 示 。 
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文化 的 性 格 既 有 水 的 灵动 又 有 山 的 沉稳 


不 知 什么 时 候 开始 很 喜欢 纵情 山水 ， 兴 许 是 出 生 在 山里 的 缘故 。 


图 9-14 nth-of-type 选择 器 效果 图 


另外 ， 如 果 计 算 奇 数 还 是 偶数 的 时 候 需要 从 下 往 上 倒 过 来 计算 的 话 ， 可 以 使 用 
nth-last-child 选择 器 来 代 蔡 nth-child 选择 器 ， 进 行 倒序 计算 。 


9.5.6 empty 选择 器 


empty 选择 器 用 来 指定 当 元 素 内容 为 空白 时 使 用 的 样式 。 
【实践 案例 9-12】 
在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 使 用 empty 选择 器 定义 单元 格 没有 内 容 时 的 样 


式 。 其 代码 如 下 所 示 : 


o 


<style type="text/css"> 
tablef{ 
margin-left:90px; 
margin-top:50px; 
:emptyl{ 
background-color:#999; 
} 
</style> 
</head> 
<body style="background-repeat:no-repeat; background-image:url(0410121130 


上 述 代码 使 用 empty 选择 器 将 没有 内 容 的 单元 格 背景 颜色 设置 为 “加 99”， 运 行 效果 


如 图 9-15 所 示 。 
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图 9-15 empty 选择 器 效果 图 


9.5.7 target 选择 器 


使 用 target 选择 器 为 页 面 中 的 某 个 target 元 素 〈 该 元 素 的 id 被 当做 页 面 中 的 超 链 接 来 使 
用 ) 指定 样式 ， 该 样式 只 在 用 户 单 击 了 页 面 中 的 超 链接 ， 并 且 跳 转 至 target 元 素 后 起 作用 。 

【实践 案例 9-13】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 使 用 target 选择 器 为 页 面 内 的 3 段 内 容 定义 样 


式 ， 其 代码 如 下 所 示 : 


上 述 代码 的 作用 是 单 击 不 同 的 链接 时 跳 转 至 页 面 的 响应 内 容 ， 并 且 响应 的 内 容 字体 颜 
色 为 “ 古 36”， 字 体 大 小 为 “14px”， 背 景 颜 色 为 “#3C9”， 实 现 了 页 内 导航 和 定位 的 功能 。 
运行 效果 如 图 9-16 所 示 。 


E 置 月 1 日 国庆 直 传 和 在 北京 天 安 门 广场 举行 了 有 数 十 万 罕 民 参加 的 中 华人 民 共 和 国 开国 大 典 。 


[a pga 是 伴随 着 近代 民族 国家 的 出 现 而 出现 的 ， 并 且 变 得 
| 


9-16 target 选择 器 执行 效果 


9.6 ”其 他 选择 器 


通过 使 用 选择 器 进行 样式 指定 ， 可 以 减少 样式 表 的 代码 书写 量 ， 样 式 表 也 会 变 得 简洁 
明了 ， 本 节 将 详细 介绍 另外 两 种 选择 器 : UI 元 素 选择 器 和 兄弟 选择 器 。 


9.6.1 UI 元 素 伪 类 选择 器 


在 CSS 3 的 选择 器 中 ， 除 了 结构 性 伪 类 选择 器 外 ， 还 有 一 种 UI 元素 状态 伪 类 选择 器 ， 
这 些 选择 器 的 共同 特征 是 ， 指定 的 样式 只 有 当 元 素 处 于 某 种 状态 下 时 才 起 作用 ， 在 默认 状 
态 下 不 起 作用 。 

在 CSS 3 中 , 共有 11 种 UI 元 素 状态 伪 类 选择 器 , 分 别 是 : E: hover、E:active、E:focus、 
E:enabled、E:disabled、E:read-only、E:read-write、E:checked、E:default、E:indeterminate 
及 E:selection。 

下 面 详细 介绍 这 些 UI 元 素 状态 伪 类 选择 器 。 


一 1， Ehover Eractve 和 E:focus 选择 器 


口 、E:hover 选择 器 用 来 指定 当 和 鼠标 指针 移动 到 元 素 上 面 时 元 素 所 使 用 的 样式 。 
使 用 方法 如 下 所 示 : 


口 Ei:active 选择 器 用 来 指定 元 素 被 激活 (和 鼠标 在 元 素 上 按 下 还 没有 松 开 ) 时 使 用 的 
样式 。 

口 E:focus 选择 器 用 来 指定 元 素 获得 光标 焦点 时 使 用 的 样式 ， 主 要 是 在 文本 框 控件 获 
得 焦点 并 进行 文字 输入 的 时 候 使 用 。 

【实践 案例 9-14】 

以 下 实例 中 ， 使 用 上 述 3 个 选择 器 来 指定 当 鼠 标 指针 移动 到 文本 框 控 件 上 面 时 、 文 本 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 
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background-color:#F06; 
. 
</style> 
</head> 
<UL> 
<LI class=user main text> 用 户 名 : </LI> 
<LIclass=user main input><INPUT class=TxtUserNameCssClass id=TxtUser 
Name type="text" 
maxLength=20 name=TxtUserName> </LI> 
</UL> 
<UL> 
<LI class=user main text> 密 码 : </LI> 
<LI class=user main input><INPUT class=TxtPasswordCssClass id=Txt 
Password 
type=password name=TxtPassword> </LI> 
</UL> 
<body> 


对 于 用 户 名 文本 框 控件 来 说 ， 上 述 代码 的 运行 结果 有 如 下 4 种 情况 。 
口 没有 用 户 对 文本 框 控件 进行 任何 操作 时 ， 文 本 框 背景 色 为 白色 ， 如 图 9-17 所 示 。 
口 ”鼠标 指针 移动 到 用 户 文本 框 控件 上 面 时 ， 文 本 框 背景 色 为 “#999”， 如 图 9-18 所 示 。 


IEIELE 
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rl 


用 后 台 / 痘 录 /1cgiro htn 


user togln vsor Login 


户 痘 录 


ars: IE 
室 码 : 


图 9-17 未 对 文本 框 进行 任何 操作 图 9-18 鼠标 指针 移动 到 用 户 文本 框 
口 用 户 文本 框 被 激活 即 息 标 在 用 户 文本 框 上 按 下 还 没有 松 开 时 ， 文 本 框 背景 色 为 
“#F06”， 如 图 9-19 所 示 。 
口 用 户 文本 框 获得 光标 焦点 时 ， 文本 框 背 景色 为 “#09F”， 如 图 9-20 所 示 。 
@ 2.E:enabled 与 E:disabled 伪 类 选择 器 一 
_ 


E:enabled 伪 类 选择 器 用 来 指定 当 元 素 处 于 可 用 状态 时 的 样式 。E:disabled 伪 类 选择 器 


用 来 指定 当 元 素 处 于 不 可 用 状态 时 的 样式 。 


当 一 个 表单 中 的 元 素 经 常 在 可 用 状态 与 不 可 用 状态 之 间 进 行 切 换 时 ， 通 常会 将 


E:disabled 伪 类 选择 器 与 E:enabled 伪 类 选择 器 结合 使 用 ， 使 用 E:disabled 伪 类 选择 器 来 设 
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CSS 样式 和 CSS 选择 器 


置 该 元 素 处 于 不 可 用 状态 时 的 样式 ， 使 用 E:enabled 伪 类 选择 器 来 设置 该 元 素 处 于 可 用 状 
态 时 的 样式 。 


EE 
人 门 习 lc:/A/g:/ 模 /通用 后 台 /登录 /1og 


user Login wser Login 


用 户 登 录 用 户 登 录 


窗 网 ; 3: 


图 9-19 用户 文本 框 被 激活 图 9-20 文本 框 获 得 光标 焦点 


【实践 案例 9-15】 

以 下 实例 中 有 两 个 radio 单 选 框 与 一 个 文本 框 ， 在 JavaScript 脚本 中 编写 代码 ， 当 用 户 
选中 其 中 一 个 radio 单 选 框 时 ， 文 本 框 变 为 可 用 状态 ， 选 中 另 一 个 radio 单 选 框 时 ， 文 本 框 
变 为 不 可 用 状态 。 结 合 使 用 E:disabled 伪 类 选择 器 与 E:enabled 伪 类 选择 器 ， 使 文本 框 处 于 
不 同 的 状态 时 分 别 使 用 不 同 的 样式 。 


<script language="JavaScript"> 
function radio onchange(){ 
var radio=document .getElementById("radiol1"); 
Var text=document .getElementById ("text1"); 
if(radio.checked) 
text .disabled=""; 
else 
text .value=""; 
text .disabled="disabled"; 


} 

</script> 

</head > 

日 志 标题 
<input type="text" id="textl" ></br> 
<input type="radio" id="radiol" name="radio" onChange="radio 
onchange ();"> 可 用 </input> 
<input type="radio" id="radio2" name="radio" onChange=" 
onchange () ; "> 不 可 用 </input> 


上 述 代 码 的 运行 结果 可 分 为 如 下 两 种 情况 : 第 一 种 是 文本 框 处 于 可 用 状态 时 ， 页 面 显 
示 效 果 如 图 9-21 所 示 。 


radio 


器 用 


9-21 文本 框 处 于 可 用 状态 
第 二 种 是 文本 框 处 于 不 可 用 状态 时 ， 页 面 显示 效果 如 图 9-22 所 示 。 
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图 9-22 文本 框 处 于 不 可 用 状态 


E:read-only 伪 类 选择 器 用 来 指定 当 元 素 处 于 只 读 状态 时 的 样式 , E:read-write 伪 类 选择 
来 指定 当 元 素 处 于 非 只 读 状 态 时 的 样式 。 


在 Firefox 浏览 器 中 E:read-only 和 E:read-write 需要 写成 “-moz-read-only” 
和 “-moz-read-write” 的 形式 。 


是 只 读 控件 ， 地 址 文本 框 控件 是 只 读 控 件 。 使 用 E:read-write 和 E:read-only 选择 器 定义 样 


式 。 


【实践 案例 9-16】 
以 下 实例 中 ， 有 一 个 姓名 文本 框 控件 和 一 个 地 址 文本 框 控件 ， 其 中 姓名 文本 框 控件 不 


将 姓名 文本 框 背 景色 设置 为 可 读 写 的 ， 地 址 文本 框 设 置 为 只 读 的 。 


ES 


CSS 样式 和 CSS 选择 器 


<style type=text/css> 

input [type="text"] :read-onlyt{ 
background-color:#999; 

} 

input [type="text"] :read-writet{ 
background-color:#0CF; 


} 

</head> ls07) 
<body> 

用 户 名 : 

<input type="text" id="text" name="text"/></br> 

&nbsp; &nbsp; &nbsp; 地 gnbsp; 址 : 

<input type="text" id="address" name="address" value=" 上 海 市 " readonly= 
"readonly"/> 

</body> 


上 述 代码 的 运行 结果 如 图 9-23 所 示 。 
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图 9-23”E:read-only 和 E:read-write 伪 类 选择 器 执行 效果 


一 4. E:checked、E:default 和 E:indeterminate 伪 类 选择 器 ) 

口 ”E:checked 伪 类 选择 器 用 来 指定 当 表 单 中 的 radio 单 选 框 或 checkbox 复 选 框 处 于 选 
取 状 态 时 的 样式 。 

口 E:default 选择 器 用 来 指定 当 页 面 打开 时 默认 处 于 选取 状态 的 单 选 框 或 复 选 框 控件 
的 样式 。 

口 、E:indeterminate 伪 类 选择 器 用 来 指定 当 页 面 打 开 时 , 如 果 一 组 单 选 框 中 任何 一 个 单 
选 框 都 没有 被 设 定 为 选取 状态 时 整 组 单 选 框 的 样式 ， 如 果 用 户 选 取 了 其 中 任何 一 
个 单 选 框 ， 则 该 样式 被 取消 指定 。 


提 在 Firefox 浏览 器 中 ，E:checked 需要 写成 “-moz-checked” 的 形式 。 | 


【实践 案例 9-17】 

在 以 下 实例 中 , 使 用 了 几 个 checkbox 复 选 框 , 复 选 框 在 非 选取 状态 时 边框 默认 为 黑色 ， 
通过 使 用 EE: checked 伪 类 选择 器 实现 当 复 选 框 处 于 选取 状态 时 复 选 框 的 边框 为 蓝 色 的 
功能 。 


上 述 代码 的 运行 结果 如 图 9-24 所 示 。 


守 码 
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图 9-24 E:checked 伪 类 选择 器 执行 效果 


5，E:selection 伪 类 选择 器 


E:selection 伪 类 选择 器 用 来 指定 当 元 素 处 于 选中 状态 时 的 样式 。 

【实践 案例 9-18】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 该 页 面 上 有 一 个 p 元 素 ， 一 个 文本 框 控件 以 及 
一 个 表格 。 当 p 元 素 处 于 选中 状态 时 ， 被 选中 文字 变 为 红色 ;， 当 文本 框 控件 处 于 选中 状态 
时 ， 被 选中 文字 变 为 灰色 ; 当 表 格 中 td 元 素 处 于 选中 状态 时 ， 被 选中 文字 变 为 绿色 。 其 代 
码 如 下 所 示 : 


EE 


上 述 代码 的 运行 结果 如 图 9-25 所 示 。 


和 网 站 栏目 也 是 网 站 首页 的 
i 


NE ener 中 


图 9-25 ”Eiselection 伪 类 选择 器 执行 效果 


9.6.2 ”兄弟 选择 器 


兄弟 选择 器 是 用 来 指定 位 于 同一 个 父 元 素 之 中 的 某 个 元 素 之 后 的 所 有 其 他 某 个 种 类 
的 兄弟 元 素 所 使 用 的 样式 ， 它 的 使 用 方法 如 下 所 示 : 


【实践 案例 9-19】 

在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 在 该 页 面 中 将 所 有 div 元 素 之 后 的 、 与 div 元 
素 同 级 的 p 元 素 指 定 其 背景 色 为 蓝 色 ， 但 是 对 div 元 素 内 部 的 p 元 素 的 背景 色 不 做 指定 。 
其 代码 如 下 所 示 : 


ES 
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<style type="text/css"> 
div~p{ 

background:#3CF; 
， 
</style> 
</head> 
<body style="background-repeat:no-repeat; background-image:url(79006 B11) 


12574903741IDt.jpg)"> 
<div style="margin-top:120px; margin-left:50px"> 
<div> 

<p> 
他 们 彼此 深信 ， 是 瞬间 进发 的 热情 让 他 们 相遇 。 这 样 的 </br> 
确定 是 美丽 的 ， 但 变幻 无 常 更 为 美丽 。</p> 

<p> 
总 在 快乐 的 时 候 ， 感 到 微微 的 恤 恐 。 在 开怀 大 笑 时 ， 流 </br> 
下 感动 的 泪水 。 我 无 法 相信 单纯 的 幸福 。</p> 
</div> 

<p> 
所 有 的 悲伤 ， 总 会 留 下 一 丝 欢 乐 的 线索 。 所 有 的 遗憾 ， 总 </br> 
会 留 下 一 处 完美 的 角落 。</p> 

<p> 
我 们 都 要 尽量 靠近 光亮 ， 让 心情 温暖 。</P> 

<P> 
一 辈子 做 对 与 做 错 的 事 ， 会 不 会 刚好 一 样 多 。</P> 
<div> 向 左 还 是 向 右 </div> 

<p> 
一 样 的 眼睛 有 不 一 样 的 看 法 。 一 样 的 耳 休 有 不 一 样 的 听 法 。 </p> 
</div> 
</body> 


上 述 代码 的 运行 结果 如 图 9-26 所 示 。 


C 人 ile:///EF:/ 模 /通用 后 台 / 淡 蓝 色 /adainrteaplates/bro. htal 


eh 是 己 间 进发 的 热情 让 他 们 ? 人 


是 美丽 的 ， 但 变幻 无 常 更 为 美丽 


总 在 快乐 的 时 候 ， 感 到 定 微 的 
下 感动 的 泪水 。 我 无 法 相信 单纯 的 


图 9-26 使 用 兄弟 元 素 选 择 器 的 执行 效果 


9.7 content 属性 的 简单 使 用 


content 属性 与 :before 及 :after 伪 元 素 配合 使 用 ， 来 插入 生成 内 容 。 该 属性 用 于 定义 元 
素 之 前 或 之 后 放置 的 生成 内 容 。 默 认 是 行内 内 容 ， 不 过 该 内 容 创建 的 框 类 型 可 以 用 属性 
display 控制 。 


“1 合用 和 择 吕 插入 内 容 


使 用 before 选择 器 在 元 素 前 面 插入 内 容 或 者 使 用 after 选择 器 在 元 素 后 面 插入 内 容 时 ， 
需要 在 选择 器 的 content 属性 中 定义 要 插入 的 内 容 。 

【实践 案例 9-20】 

以 下 实例 中 ， 对 p 元 素 使 用 before 选择 器 ， 并 且 使 用 content 属性 来 实现 p 元 素 前 面 
插入 的 内 容 为 “教师 节 的 由 来 : ”文字 。 其 代码 如 下 所 示 : 


为 了 让 插入 的 文字 美观 ， 还 可 以 在 选择 器 中 加 入 文字 的 颜色 、 文 字 的 字体 样式 。 在 
before 选择 器 中 ， 指 定 文字 颜色 为 蓝 色 ， 指 定 字体 为 “Arial, Helvetica, sans-serif”。 代 码 如 
下 所 示 : 


上 述 代码 的 执行 结果 如 图 9-27 所 示 。 


的 
师 为 救 育 事业 所 这 的 贡献 和 人 人 和 
A 


议 同意 了 国务 院 关于 ; 
定 为 教师 节 。15 人 年 9 有 10 日， 公认 


9-27 ”使 用 before 选择 器 插入 内 容 


。 2. 指定 个 别 元 素 不 进行 社 入 


【实践 案例 9-21】 
上 个 示例 对 页 面 上 的 p 元 素 使 用 了 before 选择 器 ， 如 果 该 页 面 有 多 个 p 元 素 ， 则 所 有 


的 p 元 素 前 面 都 会 被 插入 内 容 。 针 对 这 个 问题 ,在 content 属性 中 追加 了 一 个 none 属性 值 ， 
这 样 可 以 让 其 中 一 个 或 几 个 p 元 素 的 前 面 不 插入 内 容 ， 其 使 用 方法 如 下 所 示 ; 


通过 这 种 方法 , 为 p 元 素 增 加 一 个 类 , 在 这 个 类 的 样式 指定 中 将 content 属性 值 设 定 为 


“none”。 
以 下 实例 的 页 面 中 有 3 个 p 元素 , 使 用 none 属性 值 , 使 第 2 个 p 元 素 前 面 没有 被 插入 
内 容 。 


上 述 代码 的 执行 结果 如 图 9-28 所 示 。 


的 由 未 : .是 中 国 的 优 民 统 ， 早 在 公元 前 1 世纪 
西周 时 期 ， 就 提出 师 ， 获 同 于 父 “。 
教师 节 ， 就 骨 在 肯定 教师 为 教育 事业 所 做 的 贡献 。1985 年 ， 第 六 届 全 
国人 大 常委 会 第 九 次 会 议 同意 了 习 务 院 关于 建立 教师 节 的 议案 ， 会 议 
决定 将 每 年 的 9 月 10 日 定 为 教师 节 。 


教师 节 的 由 来 ， 1985 年 9 月 10 日 ， 是 中 国 第 一 个 教师 节 。 


图 9-28 使 用 content 属性 的 none 属性 值 


使 用 before 选择 器 或 after 选择 器 , 除了 可 以 在 元 素 的 前 面 或 后 面 插入 文字 之 外 , 还 可 
以 插入 图 像 文件 。 插 入 图 像 时 ， 需 要 使 用 url 属性 值 来 指定 图 像 文件 的 路 径 。 

【实践 案例 9-22】 

以 下 实例 在 p 元 素 前 插入 图 像 文件 。 
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上 述 代码 的 执行 结果 如 图 9-29 所 示 。 


NE 
但、 Ee KY 史前 证 有 重生 起 
这 么 可 爱 的 就 是 蒙 奇 奇 ，Monchhi ci 

全 2 和 大 役 是 世 办 下 际 弛 多 以 外 最 将 名 


图 9-29 使 用 选择 器 插入 图 片 


目前 Firefox、Safari、 Opera 浏览 器 都 支持 这 种 插入 图 像 文件 的 功能 , 在 IE8 
中 只 支持 插入 文字 的 功能 ， 不 支持 插入 图 像 文件 的 功能 。 


rE 使 用 content 属性 插入 项 目 编号 


在 content 属性 中 使 用 counter 属性 值 来 针对 多 个 项 目 追 加 连续 编号 , 使 用 方法 如 下 所 示 : 


< 元 素 >:before{ 
content :counter (计数 器 名 ) ; 
} 


使 用 计数 器 来 计算 编号 ， 计 数 器 可 任意 命名 。 
另外 ， 还 需要 在 元 素 的 样式 中 追加 对 元 素 的 counter-increment 属性 的 指定 ， 为 了 使 用 
连续 编号 ， 需 要 将 counter-increment 属性 的 属性 值 设 定 为 before 选择 器 或 after 选择 器 的 
counter 属性 值 中 所 指定 的 计数 器 名 。 其 代码 如 下 所 示 : 
< 元 素 >{ 
counter-increment :before 选择 器 或 after 选择 器 中 指定 的 计数 器 名 


【实践 案例 9-23】 


在 Dreamweaver CS5 中 新 建 一 个 页 面 ， 该 页 面 中 具有 多 个 标题 ， 使 用 before 选择 器 对 
这 些 标题 追加 连续 编号 ， 并 且 在 插入 的 项 目 编号 中 加 入 文字 。 其 代码 如 下 所 示 : 


[ 


上 述 代码 的 执行 结果 如 图 9-30 所 示 。 


图 9-30 在 项 目 编号 中 追加 文字 


使 用 content 属性 不 仅 可 以 追加 数字 编号 , 还 可 以 追加 字母 编号 或 罗马 数字 编号 , 使 用 
如 下 所 示 的 方法 指定 编号 种 类 。 


可 以 使 用 list-style-type 属性 的 值 来 指定 编号 的 种 类 ，list-style-type 为 指定 列表 编号 时 
所 用 的 属性 。 例 如 ， 指 定 大 写字 母 编号 时 ， 使 用 “upper-alpha” 属 性 ， 指 定 大 写 罗马 字母 
时 ， 使 用 “upper-roman” 属 性 。 

将 上 述 示例 中 的 before 选择 器 中 的 代码 修改 为 如 下 所 示 的 代码 : 


然后 重新 运行 上 述 示 例 ， 运 行 结 果 如 图 9-31 所 示 。 


9-31 upperalpha 编号 


9.8 项 目 案例 : 控制 保龄球 显示 位 置 


如 今 ， 保 龄 球 已 经 成 为 现代 社会 中 的 一 项 时 尚 运动 ， 比 赛 时 ， 在 球道 终端 放置 10 个 
木 瓶 并 排 成 三 角形 。 本 案例 通过 灵活 使 用 各 种 结构 伪 类 选择 器 控制 页 面 中 保龄球 的 显示 
大 小 、 位 置 和 效果 。 其 实现 步骤 如 下 所 示 : 

(1) 使 用 选择 器 将 保龄球 的 摆 放 形状 设置 为 一 个 三 角形 。 其 代码 如 下 所 示 : 
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</body> 

</html> 

上 述 代码 为 了 设计 出 立体 效果 ， 使 用 了 nth-of-type(n) 和 nth-last-of-type(n) 选 择 器 来 设 
置 各 个 保龄球 的 位 置 ， 使 每 个 保龄球 左边 距 和 上 边 距 都 不 同 。 其 执行 结果 如 图 9-32 所 示 。 


ET 


图 9-32 ”使 用 选择 器 控制 保龄球 位 置 


(2) 不 改变 结构 ， 稍 微 改 变 CSS 样式 ， 就 可 以 让 页 面 布局 发 生变 化 。 使 10 个 保龄球 
摆 放 在 一 条 直线 上 ， 其 代码 如 下 所 示 : 


<style type="text/css"> 
hl { font-size:16px; } 
dl, dt, da { 

padding:0; 

margin:0; 


be 
width:650px; 
height:432px; 
background:url (images/bowling-002.jpg) no-repeat right bottom; 
padding:50px 0 50px 150px; 


dE 1 
position:relative; 
left:20px; 
top:180px; 
font-weight:bold; 

} 

dq { float:left; } 

img { width:50px; } 


上 述 代码 使 用 nth-child(n) 和 nth-last-child(n) 选 择 器 并 使 用 公式 3n+2 来 控制 保龄球 的 位 
置 ， 执 行 结果 如 图 9-33 所 示 。 


到 选择 器 为 某 个 元 素 的 第 一 行文 字 指定 样式 。 


2. 如 果 用 户 只 想 在 一 个 span 元 素 或 者 某 几 个 span 元 素 前 面 插入 文字 ， 可 以 使 用 


选择 器 。 
3. 如 果 用 户 想 要 指定 编号 种 类 为 罗马 编号 ， 那 么 需要 将 属性 list-style-type 的 属性 值 
设置 为 
二 、 选 择 器 
1. 下 列 选项 中 不 是 常用 的 伪 元 素 选择 器 。 


A. first-line 选择 器 B. after 选择 器 


C. [att$=val] 选 择 器 D. first-letter 选择 器 
2. 如 果 用 户 想 要 匹配 div 元 素 之 后 和 它 同 级 的 p 元 素 ， 并 且 设 置 字体 为 蓝 色 ， 大 小 为 


14 像素 ， 下 列 选项 是 正确 的 。 
A. div~p{fcolorblue:font-size:14px:} 
B. p[id= div]{fcolorblue:} 
C. div:last-child{color:blue:} 
D. p:first-child{color:blue;font-size:14px;} 


3. 下 面 选项 中 ， 不 是 content 属性 常用 的 属性 值 。 
A. values B. counter(name) 
C. attr() D. string 

三 、 上 机 练习 


1. 使 用 选择 器 截取 博客 文章 


平时 博客 等 经 常会 有 文章 摘要 ， 将 文字 截断 后 直接 使 用 省 略 号 表示 文章 还 没有 结束 ， 
使 用 content 属性 并 使 用 伪 类 选择 器 :before 和 :after 来 截取 文章 的 一 部 分 文字 并 在 其 后 
加 入 省 略 号 。 


9.10 “实践 疑难 解答 


9.10.1 :nth-child 和 :nth-of-type 选择 器 的 区 别 


[wk .| :nth-child 和 :nth-of-type 选择 器 的 区 别 
DC 图” 网络 课堂 : http://bbs.itzcn.com/thread-19748-1-1.html 

【问题 描述 】:nth-child 和 :nth-of-type 选择 器 的 区 别 是 什么 ， 怎 么 使 用 ? 

【正确 答案 】:nth-child 和 :nth-of-type 都 是 CSS 3 中 的 伪 类 选择 器 ， 其 作用 近似 却 又 不 
完全 一 样 ， 对 其 不 熟悉 的 人 可 能 区 分 得 不 是 很 清楚 ， 下 面 就 介绍 两 者 的 不 同 ， 以 便 正 确 灵 
活 使 用 这 两 类 选择 器 。 

先 看 一 个 简单 的 实例 ， 首 先是 HTML 部 分 : 


设置 上 述 代码 中 的 第 二 个 p 元 素 字体 颜色 为 红色 , 两 个 选择 器 相对 应 的 CSS 代码 如 下 
所 示 : 


上 面 这 个 例子 中 ， 这 两 个 选择 器 所 实现 的 效果 是 一 致 的 ， 第 二 个 p 标签 的 文字 变 成 了 
红色 。 尽 管 上 面 两 个 demo 的 最 后 效果 一 致 ， 但 是 两 个 选择 器 之 间 存 在 差异 是 必然 的 。 

对 于 :nth-child 选择 器 ， 意 味 着 选择 一 个 元 素 ， 如 果 这 是 个 段落 元 素 并 且 这 是 父 标签 的 
第 二 个 孩子 元 素 ; 对 于 :nth-of-type 选择 器 ， 意 味 着 选择 一 个 元 素 ， 如 果 是 父 标签 的 第 二 个 
段落 子 元 素 。:nth-of -type 选择 器 的 限制 条 件 少 点 。 

把 上 面 的 实例 稍 作 修改 ， 就 可 以 看 到 这 两 个 选择 器 之 间 的 差异 了 ， 如 下 HTML 代码 
如 下 所 示 : 


还 是 与 上 面 例子 一 致 的 CSS 测试 代码 : 


这 时 候 两 个 选择 器 所 泻 染 的 结果 就 不 一 样 了 。 

p:nth-child(2) 泻 染 的 结果 不 是 第 二 个 p 标签 文字 变 红 ， 而 是 第 一 个 p 标签 ， 也 就 是 父 
标签 的 第 二 个 子 元 素 。 而 p:nth-oftype(2) 把 希望 泻 染 的 第 二 个 p 标签 染 红 了 。 

对 照 上 面 两 个 选择 器 的 语义 ， 此 处 的 效果 表现 差异 不 难 理解 。 

p:nth-child(2) 表 示 这 个 元 素 是 p 标签 ， 且 是 第 二 个 子 元 素 ， 这 是 两 个 必须 满足 的 条 件 。 
于 是 ， 就 是 第 一 个 p 标签 颜色 为 红色 〈 正 好 符合 : p 标签 ， 第 二 个 子 元 素 ) 。 如 果 在 div 
标签 后 面 再 插入 个 span 标签 ， 如 下 所 示 : 


那么 p:nth-child(2) 将 不 会 选择 任何 元 素 。 而 p:nth-of-type(2) 表 示 父 标签 下 的 第 二 个 p 
元 素 ， 显 然 ， 无 论 在 div 标签 后 面 再 插入 多 少 个 span 标签 或 者 hl 标签 ， 都 是 第 二 个 p 标 
签 中 的 文字 变 红 。 


9.10.2 ”如 何在 IE7-8 下 使 用 CSS 3 的 伪 类 选择 器 
面 A 如 何在 IE7-8 下 使 用 CSS 3 的 伪 类 选择 器 


[ 深 例 网 络 课堂 ， http:/bbs itzcn.comy/thread-19749-1-1.html 
【问题 描述 】 众 所 周知 ，CSS 3 的 选择 器 极其 强大 ， 但 是 如 何在 IE7-8 下 使 用 CSS 3 的 


伪 类 选择 器 呢 ? 

【正确 答案 】CSS 3 的 选择 器 功能 强大 ， 其 结构 伪 类 选择 器 更 是 特别 的 优秀 ， 例 如 
“:nth-child” 选 择 器 。 碍 于 IE9 以 下 的 浏览 器 很 多 朋友 都 不 敢 尝 试 使 用 ， 以 至 于 无 法 体会 到 
CSS 3 选择 器 的 强大 功能 。 那 么 在 正 7-8 浏览 器 下 我 们 可 以 这 样 来 使 用 : 


如 果 样 式 文件 多 ， 还 可 以 这 样 使 用 : 


背景 、 边 框 和 渐变 的 相关 属性 


CSS 3 具有 非常 强大 的 功能 ， 它 不 仅 使 页 面 代码 更 加 简洁 、 结 构 更 加 合理 ， 而 且 使 性 
能 和 效果 都 得 到 了 更 好 的 体现 。 上 一 章 已 经 学 习 了 CSS 样式 和 选择 器 ， 本 章 将 主要 介绍 
CSS 3 的 背景 、 边 框 和 渐变 的 相关 属性 ， 以 及 如 何在 一 个 元 素 中 显示 多 个 背景 图 像 ， 如 何 
设置 图 片 的 边框 和 绘制 圆 角 边框 等 功能 。 

本 章 学 习 要 点 : 

> 掌握 CSS 3 中 与 背景 样式 有 关 的 属性 

> 掌握 CSS 3 中 与 边框 样式 有 关 的 属性 

> 掌握 CSS 3 中 渐变 最 常用 的 属性 

> 了 解 CSS 3 中 与 背景 、 边 框 和 渐变 的 相关 属性 在 各 种 浏览 器 的 兼容 情况 

> 熟练 使 用 border-radius 属性 绘制 圆 角 边框 

> 掌握 如 何 实现 简单 的 线性 渐变 、 径 向 渐变 和 重复 渐变 


10.1 背景 样式 


背景 (background) 属性 是 CSS 3 中 使 用 频率 最 高 的 属性 。CSS 3 中 增加 了 一 些 与 背 
景 相关 的 属性 ， 它 们 分 别 是 background-size 属性 、background-clip 属性 、background-origin 
属性 和 background-break 属性 。 本 节 主 要 学 习 这 4 种 属性 的 用 法 。 

各 种 浏览 器 对 background 属性 的 兼容 不 同 ， 在 Firefox 浏览 器 中 支持 除 background-size 
之 外 的 其 他 3 个 属性 ， 并 且 需 要 在 属性 前 面 加 前 绷 “-moz-”; 在 Chrome 浏览 器 和 Opera 浏览 
器 中 支持 除 background-break 之 外 的 3 个 属性 ， 并 且 需 要 在 属性 前 面 加 上 前 缀 “-webkit- ”。 
在 Firefox 浏览 器 中 使 用 background-break 属性 时 应 该 写成 “-moz-background-inline-policy” 
的 形式 。 


10.1.1 ， background-size 属性 


CSS 2 之 前 的 版 本 无 法 控制 背景 图 像 的 样式 ， 如 果 要 完整 地 显示 背景 图 像 ， 则 需要 设 
计 好 背景 图 片 的 大 小 。 CSS 3 中 新 增 的 background-size 属性 可 以 用 于 指定 背景 图 像 的 大 小 ， 
很 好 地 解决 了 之 前 的 问题 ， 使 用 户 可 以 随意 地 控制 背景 图 像 的 大 小 。 

background-size 属性 的 语法 如 下 所 示 : 


其 中 比较 常用 的 参数 值 如 下 所 示 : 


DD 
口 
口 
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auto 默认 值 ， 保 持 背 景 图 像 原 有 的 宽度 和 高 度 。 

length ”由 浮 点 数字 和 单位 标识 符 组 成 的 长 度 值 。 其 单位 为 px， 不 能 为 负 值 。 
percentage 百 分 值 ， 可 以 是 0%~100% 之 间 的 任何 值 ， 不 可 以 为 负 值 。 

cover 保持 图 像 本 身 的 宽度 和 高 度 ， 当 图 像 小 于 容器 又 无 法 使 用 background-repeat 
来 实现 时 ， 就 可 以 使 用 cover 将 图 像 放大 以 铺 满 整个 容器 ， 但 是 这 种 方法 会 使 背景 
图 像 失真 。 

contain 保持 图 像 本 身 的 宽度 和 高 度 ， 当 图 像 大 于 容器 而 又 需要 将 背景 图 片 全 部 
显示 出 来 时 ， 就 可 以 使 用 contain 将 图 像 缩小 到 适合 容器 的 大 小 ,但 是 这 种 方法 也 
会 使 背景 图 像 失真 。 


下 面 通过 简单 的 案例 来 介绍 background-size 属性 的 使 用 。 

【实践 案例 10-1】 

在 Dreamweaver 中 新 建 html10-1 页 面 ， 添 加 div 元 素 并 指定 该 元 素 的 背景 图 像 ， 然 后 
将 background-size 属性 的 值 设置 为 percentage 表示 背景 图 像 的 大 小 。 页 面具 体 代 码 如 下 


所 示 : 


上 述 代码 在 Chrome 浏览 器 中 的 效果 如 图 10-1 所 示 。 
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图 10-1 使 用 background-size 属性 的 效果 图 


如 果 分 别 设置 background-size 属性 的 值 length、cover 或 contain 等 ， 图 片 
就 会 有 不 同 的 效果 。 


10.1.2 background-clip 属性 


在 HIML 页 面 中 对 于 任何 元 素来 说 ， 它 都 会 包含 四 个 区 域 和 边缘 ， 即 外 部 补 白 区 域 
(margin)、 边 框 区 域 (border)、 补 白 区 域 (padding) 和 内 容 区 域 (content)， 以 及 外 部 补 
白 边缘 、 边 框 边缘 、 补 白 边缘 和 内 容 边 缘 。 它 们 之 间 的 关系 如 图 10-2 所 示 。 


图 10-2 ”具有 背景 的 元 素 构成 图 


在 CSS 3 中 可 以 使 用 background-clip 属性 修改 背景 的 显示 范围 或 者 背景 的 裁剪 区 域 。 
background-clip 属性 的 语法 主要 如 下 所 示 : 


其 中 比较 常用 的 参数 值 如 下 所 示 : 

口 border-box 默认 值 ， 背 景 从 边框 区 域 向 外 裁剪 ， 即 超出 边框 区 域 的 背景 将 被 裁 
剪 掉 。 

口 padding-box 背景 从 补 白 区 域 向 外 裁剪 ， 即 超过 补 白 区 域 的 背景 将 被 裁剪 掉 。 

口 content-box 背景 从 内 容 区 域 向 外 裁剪 ， 即 超过 内 容 区 域 的 背景 将 被 裁剪 掉 。 
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background-clip 属性 主要 判断 background 是 否 包 含 边框 区 域 。 如 果 是 边框 值 ， 则 背景 
裁剪 的 是 整个 边框 区 域 ; 如 果 是 padding 值 ， 则 背景 会 忽略 补 白 边缘 而 且 边 框 区 域 是 透明 
的 ; 如果 是 content 值 ， 则 背景 裁剪 的 是 内 容 区 域 ， 如 果 背 景 图 片 有 多 个 ， 对 应 的 
background-clip 值 之 间 使 用 喜 号 隔 开 。 

下 面 通过 简单 的 案例 来 介绍 background-clip 属性 的 使 用 。 

【实践 案例 102】 829) 

在 Dreamweaver 中 新 建 html10-2 页 面 ， 添 加 div 元 素 并 制定 背景 图 像 ， 然 后 分 别 使 用 
background-clip 属性 的 border 值 和 content 值 来 修改 背景 的 显示 范围 。 代 码 如 下 所 示 : 


<style type="text/css"> 
divt{ 
padding: 65px; 
background-image:url (images/1001.jpg); 
border:20px dotted #FCO; 
width:400px; 
height:200px; 


div.imgl{ 
-moz-background-clip: border; 
-webkit-background-clip: border; 


div.img2{ 
-moz-background-clip: content; 
—webkit-background-clip: content; 


</style> 
</head> 
<body bgcolor="#CC99FF"> 
<div class="imgl"></div><br> 
<div class="img2"></div> 
</body> 


上 述 代 码 在 Chrome 浏览 器 中 的 效果 如 图 10-3 和 图 10-4 所 示 。 
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图 10-3 ”使 用 border 属性 值 的 效果 图 图 10-4 ”使 用 content 属性 值 的 效果 图 


10.1.3 background-origin 属性 


在 CSS 中 如 果 要 给 图 像 定位 ， 一 般 使 用 background-position 属性 ， 但 是 这 个 属性 总 是 
以 元 素 的 左上 角 为 坐标 原点 进行 图 像 定位 。background-origin 属性 用 来 指定 绘制 背景 图 像 
时 的 起 点 ， 使 用 此 属性 可 以 任意 定位 图 像 的 起 始 位 置 。 它 的 语法 如 下 所 示 : 


其 中 主要 的 参数 如 下 所 示 : 

口 border-box 默认 值 ， 从 border 区 域 开始 显示 背景 。 

口 padding-box 从 padding 区 域 开 始 显示 背景 。 

口 content-box 从 content 区 域 开始 显示 背景 。 

background-origin 属性 主要 用 来 决定 background-position 计算 的 参考 位 置 。 如 果 是 
border 值 ， 则 在 border 边缘 显示 ; 如 果 是 padding 值 ， 则 背景 图 像 的 位 置 在 padding 边缘 显 
示 ; 如 果 是 content 值 ， 则 背景 图 像 会 以 内 容 边缘 作为 起 点 ， 多 个 背景 图 像 对 应 的 
background-origin 值 使 用 逗号 隔 开 。 

下 面 通 过 简单 的 案例 来 介绍 background-origin 属性 的 使 用 。 

【实践 案例 10-3】 

在 Dreamweaver 中 新 建 html10-3 页 面 ， 添 加 div 元 素 并 指定 背景 图 像 ， 然 后 分 别 使 用 
background-clip 属性 的 content 值 和 border 值 来 给 图 像 定位 。 代 码 如 下 所 示 : 
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—webkit-background-clip:padding-box; 
background-clip: padding -box; 
background-origin:border-box; 
—moz-background-origin:border-box; 
—webkit-background-origin:border-box; 


’ 

</style> 

</head> 本 

<body bgcolor="#FFCCFF"> 

<div class="imgl"> 
<p><center> 春 (节选 ) </center><p> 
盼望 着 ,盼望 着 ， 东 风 来 了 ， 春 天 的 脚步 近 了 。</br></br> 
一 切 都 像 刚 睡 醒 的 样子 ， 欣 欣然 张 开 了 眼 。 山 朗 润 起 来 了 ， 水 涨 起 来 了 ， 太 阳 的 脸 
红 起 来 了 。</br></br> 
小 草 偷偷 地 从 土 里 钻 出 来 ， 嫩 嫩 的 ， 绿 绿 的 。 园 子 里 ， 田 野 里 ， 瞧 去 ， 一 大 片 一 大 
片 满 是 的 。 坐 着 ， 躺 着 ， 打 两 个 滚 ， 踢 几 脚 球 ， 赛 几 趟 跑 ， 捉 几 回 迷 藏 。 风 轻 悄悄 
的 ， 草 绵软 软 的 。</br></br> 
桃 树 、 查 树 、 梨 树 ， 你 不 让 我 ， 我 不 让 你 ， 都 开 满 了 花 赶 趟 儿 。 红 的 像 火 ， 粉 的 像 
霞 ， 白 的 像 雪 。 花 里 带 着 甜 味 ， 闭 了 眼 ， 树 上 仿佛 已 经 满 是 桃 儿 、 查 儿 、 梨 儿 ! 花 
下 成 千 成 百 的 蜜蜂 喻 喻 地 病 着 ， 大 小 的 蝴蝶 飞 来 飞 去 。 野花 遍地 是 : 杂 样 儿 ， 有 名 
字 的 ， 没 名 字 的 ， 散 在 草 从 里 ， 像 眼睛 ， 像 星星 ， 还 瞬 呀 皮 的 。</br></br> 
“ 吹 面 不 赛 杨 柳 风 ”, 不 错 的 , 像 母亲 的 手 抚摸 着 你 . 风 里 带 来 些 新 翻 的 泥土 的 气息 ， 
混 着 青草 味 ， 还 有 各 种 花 的 香 ， 都 在 微微 润 湿 的 空气 里 酝酿。 乌 儿 将 巢 安 在 繁花 嫩 
叶 当 中 ， 高 兴起 来 了 ， 呼 朋 引 伴 地 卖弄 清脆 的 喉 蛇 ， 唱 出 宛 转 的 曲子 ， 跟 轻 风流 水 
应 和 着 。 牛 背 上 牧童 的 短笛 ， 这 时 候 也 成 天 趴 亮 地 响 着 。 
</p> 
</div> 
</body> 


上 述 代 码 在 <body> 中 选择 <div class="imgl">， 则 使 用 的 是 content 属性 ， 选 择 <div 
class="img2">， 则 使 用 的 是 border 属性 ， 不 同 的 属性 选择 在 浏览 器 中 展示 的 效果 不 同 ， 在 
Chrome 浏览 器 中 的 效果 如 图 10-5 和 图 10-6 所 示 。 
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图 10-5 ”使 用 content 属性 值 的 效果 图 图 10-6 使 用 border 属性 值 的 效果 图 


10.1.4 _ background-break 属性 


在 CSS 3 中 可 以 使 用 background-break 属性 来 指定 平 铺 内 联 元 素 背 景 图 像 时 的 循环 方 
式 ， 它 的 主要 参数 值 如 下 所 示 : 

口 bounding-box 背景 图 像 在 整个 内 联 元 素 中 进行 平 铺 。 

口 each-box 背景 图 像 在 每 一 行 中 进行 平 铺 。 

口 ” continuous 下 一 行 中 的 图 像 紧 接着 上 一 行 中 的 图 像 继 续 平 铺 。 

下 面 通过 简单 的 案例 来 介绍 background-origin 属性 的 使 用 。 

【实践 案例 10-4】 

在 Dreamweaver 中 新 建 html10-4 页 面 ， 添 加 div 元 素 ， 并 在 div 内 部 添加 span 元 素 ， 
给 span 元 素 添加 背景 图 像 ， 然 后 分 别 使 用 background-break 属性 的 bounding-box 值 、 
each-box 值 和 continuous 值 来 指定 背景 图 像 的 循环 方式 。 代 码 如 下 所 示 : 


上 述 代 码 在 <body> 中 选择 <div class="imgl"> 则 使 用 的 是 bounding-box 属性 ， 选 择 <div 
class="img2"> 则 使 用 的 是 each-box 属性 ， 选 择 <div class="img3"> 则 使 用 的 是 continuous 属 
性 ， 选 择 不 同 的 属性 在 浏览 器 中 展示 的 效果 不 同 ， 在 Firefox 浏览 器 中 的 效果 如 图 10-7、 
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图 10-8 和 图 10-9 所 示 。 
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图 10-7 bounding-box 属性 图 10-8 each-box 属性 图 10-9 continuous 属性 


10.2 ”项 目 案例 1: 实现 书架 效果 


图 像 进行 重 


在 CSS3 i hh 司 一 个 元 素 里 添加 多 个 背景 图 像 ， 并 且 可 以 将 多 个 背景 
的 背景 样式 来 实 


登 显示 ， 这 样 有 利于 调整 背景 图 像 中 所 用 的 素材 。 本 节 将 通过 上 一 节 所 学 
现在 同一 个 元 素 : ote 的 功能 ， 实 现 书 架 展 示 效 果 的 操作 。 

【实例 分 析 】 

现在 随 着 网 上 购物 越 来 越 流 行 ， 很 多 图 书 也 可 以 在 网 上 购买 。 实 现在 书架 页 面 中 显示 
多 个 图 像 效果 的 主要 步骤 如 下 所 示 。 

(1) 首先 在 Dreaniweaver 中 新 建 html10-5 页 面 ， 添 加 两 个 div 元 素 ， 它 们 分 别 用 来 显 
示 标 题 和 图 片 。 页 面具 体 代码 如 下 所 示 。 

<body> 


<div id="header"> 


<div id="register header"> 


<div class="register header left"><img src="images/logo.gif" alt= 
"logo"></div> 
<div class="register header right"><a href="index.html" class="blue"> 
首页 </a> | <a href="product.html" class="blue"> 商 品 展示 页 </a> | <a href= 
"shopping.html"” class="blue"> 购 物 车 </a> | <a href="login.html" class= 
"blue"> 登 录 </a></div> 
</div> 
</div> 
<div id="main"> 
<div class="register content"> 
<div class="register mid bg"> 
<ul> 
<1i class="register mid left">1. 当当 书架 </1i> 
<1i class="register mid mid">2. 图 书 支付 </1i> 
<l1i class="regqister mid right*>3- 支付 成 功 </1i> 
</ul> 


(2) 为 页 面 中 的 元 素 添加 相应 的 样式 , 使 用 background-image 属性 添加 多 张 背景 图 片 。 
具体 样式 代码 如 下 所 示 : 


(3) 运行 本 示例 的 代码 进行 测试 ， 在 Chrome 浏览 器 中 的 最 终 效果 如 图 10-10 所 示 。 
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图 10-10 显示 多 个 背景 图 片 效 果 图 


10.3 边框 样式 


在 CSS 2 之 前 的 版 本 中 使 用 border 属性 只 能 设置 纯色 或 者 简单 的 线条 (如 solid .double、 
dashed 等 )， 而 CSS 3 中 添加 了 新 的 边框 样式 ， 可 以 使 用 图 片 设置 边框 样式 和 颜色 ， 还 可 
以 添加 阴影 框 ， 甚 至 可 以 实现 创建 圆 角 边框 的 功能 。 

本 节 将 主要 学 习 CSS 3 中 新 增加 的 border-color 属性 .border-image 属性 和 border-radius 
属性 。 

各 种 浏览 器 对 border 属性 的 兼容 不 同 ， 在 Firefox 浏览 器 中 支持 这 3 个 属性 ， 需 要 在 
属性 前 面 加 上 “-moz-” 在 Chrome 浏览 器 中 支持 除 border-color 之 外 的 两 个 属性 ， 需 要 在 
属性 前 面 加 上 “-webkit-” 在 Opera 浏览 器 中 也 是 支持 除 border-color 之 外 的 两 个 属性 ， 直 
接 写 属性 名 即 可 。 


10.3.1 border-color 属性 


border-color 属性 可 以 用 来 设置 边框 的 颜色 , 在 CSS 3 中 border-color 增加 了 许多 功能 ， 
除了 可 以 和 CSS 2 之 前 版 本 中 的 border-color 属性 混合 使 用 外 ， 还 可 以 为 边框 设置 更 多 的 
颜色 ， 比 如 给 边框 添加 渐变 颜色 或 者 显示 边框 的 彩色 效果 。 

在 之 前 border-color 属性 的 基础 上 ，CSS 3 中 又 增加 了 4 种 新 的 颜色 属性 。 它 们 的 具体 
说 明 如 下 所 示 : 

口 border-top-colors 定义 元 素 顶 部 边框 的 颜色 。 

口 border-right-colors 定义 元 素 右 侧 边框 的 颜色 。 

口 ”border-bottom-colors 定义 元 素 底 部 边框 的 颜色 。 

口 border-left-colors 定义 元 素 左 侧 边框 的 颜色 。 

下 面 通过 简单 的 案例 来 介绍 border-color 属性 的 使 用 。 

【实践 案例 10-5】 

在 Dreamweaver 中 新 建 html10-6 页 面 ， 添 加 div 元 素 ， 然 后 使 用 border-color 属性 设 
置 边框 的 颜色 为 渐变 色 。 代 码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


-moz-border-bottom-colors:#F00 #F00 #F00 #F00 #F00 #F90 #F90 #F90 
#F90 #F90 #FFO #FFO #FFO #FFO #FFO #0C0 #0C0 #0C0 #0CO #0C0O #9F0 #9F0 
#9FO #9FO #9F0O #09F #09F #09F #09F #09F #63F #63F #63F #63F #63F; 
-moz—border-left-colors:#F00 #F00 #F00 #F00 #F00 #F90 #F90 #F90 #F90 
#F90 #FFO #FFO #FFO #FFO #FFO #0CO #0CO #0CO #0CO #0CO #9F0 #9F0 #9F0 
#9FO #9F0O #09F #09F #09F #09F #09F #63F #63F #63F #63F #63F; 


div.div2{ 
width:500px; 
height:250px; 
background-image:url (images/1002.jpg) 
} 
</style> 
<body> 
<div class="div1"> 
<div class="div2"></div> 


</div> 
</body> 
上 述 代 码 在 Firefox 浏览 器 中 的 效果 如 图 10-11 所 示 。 
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图 10-11 使 用 border-color 属性 的 效果 图 


10.3.2 border-image 属性 


CSS 2 之 前 的 版 本 中 长 和 宽 处 于 变换 状态 的 元 素 ， 如 果 要 使 用 图 像 边框 非常 麻烦 。 而 
CSS 3 新 增加 的 border-image 属性 功能 非常 强大 ， 不 仅 解决 了 传统 的 使 用 背景 图 片 设置 边 
框 样式 的 问题 ， 减 少 了 页 面 中 的 元 素 ， 还 可 以 模拟 实现 background-image 属性 的 功能 。 


border-image 属性 的 语法 如 下 所 示 : 


其 中 比较 常用 的 参数 如 下 所 示 : 
口 none 默认 值 ， 无 背景 图 。 
口 image 使 用 相对 或 绝对 路 径 定义 背景 图 像 。 
口 number 用 来 设置 边框 宽度 ， 就 像 border-width 一 样 取 值 ， 可 以 设置 1~4 个 值 ， 
表示 上 、 右 、 下 、 左 4 个 方向 。 其 默认 单位 是 px。 
口 percentage 用 来 设置 边框 的 宽度 ,主要 是 针对 背景 图 像 来 说 的 .使 用 百分比 表示 。 
口 stretch、repeat 和 round 可 选 属性 ， 用 来 设置 边框 背景 图 片 的 铺 放 方式 。stretch 
是 默认 值 ， 表 示 拉 伸 ，repeat 是 重复 ，round 是 平 铺 。 
border-image 属性 值 中 至 少 必须 指定 5 个 参数 ， 其 中 第 一 个 参数 为 边框 所 使 用 的 图 像 
文件 路 径 , 接 下 来 4 个 参数 表示 当 浏 览 器 自动 把 边框 所 使 用 到 的 图 像 进行 分 隔 时 的 上 边 距 、 
右边 距 、 下 边 距 和 左边 距 。 


浏览 器 对 边框 分 割 图 像 时 会 自动 将 图 像 分 割 为 9 部 分 ， 它 的 分 割 方法 与 “九宫 格 ” 模 
型 相似 ， 如 图 10-12 所 示 。 


border-top-image 


border-top-left-image border-top-right-image 
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图 10-12 浏览 器 对 图 像 的 分 隔 示 意图 


它们 的 具体 属性 如 下 所 示 : 

口 border-top-left-image 定义 左上 角 边 框 的 背景 图 像 。 
口 ”border-top-image 定义 顶部 边框 的 背景 图 像 。 

口 border-top-right-image 定义 右上 角 边 框 的 背景 图 像 。 
口 border-left-image 定义 左 侧 边框 的 背景 图 像 。 

口 border-right-image 定义 右 侧 边 框 的 背景 图 像 。 


口 ”border-bottom-left-image 定义 左下 角 边 框 的 背景 图 像 。 
口 “border-bottom-image 定义 底部 边框 的 背景 图 像 。 
口 border-bottom-right-image 定义 右 下 角 边框 的 背景 图 像 。 
其 中 border-top-left-image 、 border-top-right-image 、 border-bottom-right-image 和 
border-bottom-left-image( 即 1、3、9、7) 这 4 个 边 角 的 部 分 没有 任何 展示 效果 ， 常 被 称 作 
2) 盲区 ; 而 border-top-image、border-right-image、border-bottom-image 和 border-left-image( 即 
2、6、8、4) 这 4 个 部 分 在 border-image 中 是 展示 效果 的 区 域 。 


在 CSS 3 中 除了 可 以 使 用 border 属性 或 者 border-width 属性 来 指定 边框 的 宽度 外 ， 还 
可 以 使 用 border-image 属性 指定 边框 的 宽度 。 

【实践 案例 10-6】 

下 面 通过 简单 的 案例 来 介绍 一 下 border-image 属性 的 使 用 。 在 Dreamweaver 中 新 建 
html10-7 页 面 ， 添 加 div 元 素 ， 然 后 使 用 border-image 属性 设置 边框 的 图 像 。 代 码 如 下 
所 示 : 


上 述 代码 主要 使 用 border-image 属性 设置 边框 的 图 像 ，url 指定 了 图 像 的 路 径 ， 然 后 使 
用 “100 60 100 60” 这 4 个 参数 指定 边框 所 使 用 到 的 图 像 分 割 时 的 上 边 距 、 右 边 距 、 下 边 
距 以 及 左边 距 ， 而 50px 设置 边框 的 宽度 ， 在 CSS 3 中 如 果 图 像 分 割 时 指定 4 个 方向 的 边 
框 宽度 相同 时 ， 可 以 只 写 一 个 参数 ， 其 他 3 个 参数 省 略 。 以 上 代码 在 Chrome 浏览 器 中 的 
效果 如 图 10-13 所 示 。 
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sm od 


面 朝 大 海 春暖 花 开 
从 明天 起 做 个 幸福 的 人 
从 明天 起 关心 粮食 和 蔬菜 


面 朝 大 海 者 晓 花 开 
从 明天 起 和 等 一 个 亲人 通信 


那 亨 福 的 闪电 告诉 我 的 
给 每 一 条 潭 每 一 座 山 取 个 温暖 的 名 字 
陌生 人 我 也 为 你 祝福 


愿 你 有 一 个 灿烂 前 程 
给 每 一 条 河 每 一 座 山 取 个 温暖 的 名 字 
a 情人 终 成 普 属 
我 只 愿 面 朝 大 海 春暖 花 开 


图 10-13 ”使 用 border-image 属性 的 效果 图 


10.3.3 ”border-radius 属性 


CSS 2 之 前 的 版 本 需要 使 用 图 像 文件 才能 绘制 圆 角 边框 ， 而 CSS 3 新 增加 的 
border-radius 属性 只 靠 样式 就 能 完成 贺 角 边框 的 绘制 。 目 前 为 止 ，Firefox 浏览 器 、Opera 
浏览 器 和 Chrome 浏览 器 等 都 支持 这 种 绘制 圆 角 边框 的 属性 ， 使 用 border-radius 属性 有 下 
面 几 个 优点 : 

口 减少 维护 的 工作 量 。 

口 提高 网 页 的 性 能 。 


口 增加 视觉 的 可 靠 性 和 美观 度 。 
border-radius 属性 常用 的 语法 如 下 所 示 : 


border-radius 是 一 种 缩写 的 方法 ， 如 果 “/” 前 后 的 值 都 存在 ， 那 么 “/” 前 面 的 值 设置 
其 水 平 半 径 ,“/” 后 面 的 值 设 置 垂 直 半 径 ， 如 果 没 有 “/”, 表 示 水 平 半 径 和 垂直 半径 相等 。 
另外 ,设置 的 4 个 值 是 按照 top-left、top-right，bottom-right 和 bottom-left 的 顺序 来 设置 的 。 
常见 的 形式 如 下 所 示 : 

口 border-radius: [<length>{1,4}] 只 有 一 个 值 ， 表示 4 个 方向 的 值 相 等 。 

口 border-radius: [<length>{1,4}] [<length>{1,4}] 只 有 两 个 值 ， 表示 top-left 和 
bottom-right 的 值 相 等 ，top-right 和 bottom-left 的 值 相等 。 

口 border-radius: [<length>{1,4}] [<length>{1,4}] [<length>{1,4}] 设置 3 个 值 ， 第 
一 个 值 设置 top-left， 第 二 个 值 设置 top-right 和 bottom-left 并 且 它们 的 值 相 等 ， 第 
三 个 值 设置 bottom-right。 

口 border-radius: [<length>{1,4}] [<length>{1,4}] [<length>{1,4}] [<length>{1,4}] 
表示 4 个 不 同方 向 的 值 。 

同 border-image 属性 类 似 ， 边 框 背景 可 以 分 为 多 部 分 用 以 设置 不 同方 向 的 背景 图 像 。 

border-radius 属性 也 可 以 分 别 设置 不 同 圆 角 的 半径 。 具 体 属性 如 下 所 示 : 

口 border-top-left-radius 定义 左上 角 的 圆 角 。 

口 border-top-right-radius 定义 右上 角 的 圆 角 。 

口 border-bottom-right-radius 定义 右 下 角 的 圆 角 。 

口 border-bottom-left-radius 定义 左下 角 的 圆 角 。 

下 面 通 过 简单 的 案例 来 介绍 border-radius 属性 的 使 用 。 

【实践 案例 10-7】 

在 Dreamweaver 中 新 建 html10-8 页 面 ， 添 加 div 元 素 ， 然 后 使 用 border-radius 属性 设 

置 背景 图 片 为 圆 角 边框 。 代 码 如 下 所 示 : 


上 述 代码 主要 使 用 border-radius 属性 设置 圆 角 的 半径 值 ， 它 的 值 有 4 个 ， 第 一 个 值 表 
示 左 上 角 半 径 ， 第 二 个 值 表示 右上 角 半 径 ， 第 三 个 值 表 示 右 下 角 半 径 ， 最 后 一 个 值 表 示 左 
下 角 半 径 。 以 上 代码 在 Chrome 浏览 器 中 的 效果 如 图 10-14 所 示 。 
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曲 曲折 折 的 荷塘 上 面 ， 弥 望 的 是 田 田 的 叶子 。 
叶子 出 水 很 高 ， 像 享 享 的 舞女 的 初 。 层 层 的 叶子 中 
间 ， 有 零星 地 点 级 着 些 和 白花 ， 有 县 娜 地 开 着 的 ， 有 兰 
汲 地 打 着 条 儿 的 ;正如 一 粒 粒 的 明珠 ， 又 如 怕 天 里 
的 星星 ， 又 如 刚 出 浴 的 美人 。 微 风 过 处 ， 送 来 缕缕 

仿佛 远 处 高 楼 上 渺茫 的 歌声 似 的 。 这 时 候 叶 


清香 ， 

子 与 花 也 有 一 丝 的 颤动 ， 像 办 电 般 ， 霍 时 传 过 荷塘 
的 那 边 去 了 。 叶 子 本 是 肩 并 肩 密 密 地 挨 荐 ， 这 便 究 
然 有 了 一 道 凝 牙 的 波 疗 。 叶 子 底下 是 脉 脉 的 流水 ， 
竹 住 了 ， 不 能 见 一 些 颜色 ， 而 叶子 却 更 


图 10-14 ”使 用 border-radius 属性 的 效果 图 


10.4 项 目 案例 2: 相片 背景 设置 边框 


在 前 面 的 章节 中 学 习 了 背景 样式 和 边框 样式 的 各 个 属性 ， 本 节 将 通过 这 些 属 性 来 实现 
设计 相片 背景 边框 的 操作 。 

【实例 分 析 】 

现在 随 着 科技 的 进步 ， 用 手机 就 可 以 拍摄 到 很 多 自己 满意 的 照片 ， 可 以 通过 自己 的 喜 
好 给 照片 加 上 背景 边框 。 本 节 项 目 案例 主要 使 用 CSS 3 中 背景 样式 和 边框 样式 的 几 个 属性 


来 设计 一 个 相片 的 背景 边框 。 

实现 相片 背景 边框 的 主要 步骤 如 下 所 示 : 

(1) 首先 在 Dreamweaver 中 新 建 html10-9 页 面 ， 添 加 div 元 素 ， 该 div 元 素 用 来 显示 
图 片 。 页 面 代 码 如 下 所 示 : 


(2) 为 页 面 中 的 div 元 素 添 加 相关 的 样式 实现 相片 背景 的 效果 。 具 体 代码 如 下 所 示 : 


上 述 代码 将 background-clip 属性 的 值 设置 为 padding， 该 属性 值 表示 背景 从 补 白 区 域 
向 外 剪裁 ， 将 background-origin 属性 的 值 设置 为 content-box， 该 属性 值 表示 背景 图 像 以 内 
容 边缘 作为 起 点 ; 将 border-radius 属性 的 值 设 置 为 60px， 该 属性 值 设 置 边框 圆 角 样式 。 另 
外 “-webkit” 和 “-moz” 分 别 表示 在 不 同 浏览 器 下 的 显示 效果 。 

(3) 运行 本 示例 的 代码 进行 测试 ， 在 Chrome 浏览 器 中 的 效果 如 图 10-15 所 示 。 
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图 10-15 相片 背景 边框 效果 图 


10.5 渐变 


渐变 是 从 一 种 颜色 到 另 一 种 颜色 的 平滑 过 渡 。 在 创建 渐变 的 过 程 中 可 以 指定 多 个 中 间 
颜色 值 ， 称 为 色 标 。 每 个 色 标 包含 一 种 颜色 和 一 个 位 置 ， 浏 览 器 从 每 个 色 标 的 颜色 淡出 到 
下 一 个 ， 以 创建 平滑 的 渐变 。 目 前 渐变 主要 包括 线性 渐变 和 径 向 渐变 以 及 重复 渐变 。 本 节 
将 主要 学 习 这 几 种 渐变 的 相关 知识 。 


10.5.1 ”线性 渐变 


在 线性 渐变 的 过 程 中 颜色 沿 着 一 条 直线 过 度 : 从 左 侧 到 右 侧 、 从 顶部 到 底部 或 者 沿 着 
任意 轴 。 要 创建 线性 渐变 需要 指定 方向 、 起 始 颜色 、 结 束 颜 色 以 及 希望 沿 着 这 条 线 添 加 的 
任何 色 标 。 浏 览 器 负责 剩余 工作 ， 通 过 绘制 与 渐变 线 垂 直 的 颜色 线 来 填充 整个 元 素 。 它 生 
成 从 一 种 颜色 到 另 一 种 颜色 的 平 铺 淡 出 ， 沿 着 所 指定 的 方向 渐变 。 

Webkit、Opera 和 Mozilla 引擎 对 于 CSS 3 属性 一 般 都 采取 同样 的 语法 ， 但 是 对 于 渐变 
的 某 些 部 分 它们 无 法 达成 一 致 ,所 以 本 节 主 要 包括 2 部 分 :第 1 部 分 介绍 线性 渐变 在 Mozilla 
和 Opera 引擎 下 的 基本 语法 应 用 ;第 2 部 分 介绍 线性 渐变 在 Webkit 引擎 下 的 两 种 不 同 应 用 。 


人 在 Mozla 和 Opera 引擎 下 的 一 般 应 用 


线性 渐变 的 语法 如 下 所 示 : 


该 语法 中 主要 有 3 个 参数 : 第 1 个 参数 定义 线性 渐变 的 方向 ， 可 以 使 用 参数 point 和 
angle 表示 。 人 参数 point 表示 起 始 方向 ， 默 认 属性 值 为 top，top 表示 从 上 到 下 ，left 表示 从 
左 到 右 ， 如 果 定 义 为 “left top” 则 表示 从 左上 角 到 右 下 角 ; 参数 angle 定义 渐变 的 角度 ， 
主要 包括 deg ( 度 ，1 周 等 于 360deg)、grad (梯度 ，90 度 等 于 100grad)、rad〔 弧 度 ，1 周 
等 于 2*PIrad)。 第 2 个 参数 表示 起 始 颜色 ， 第 3 个 参数 表示 终点 颜色 。 

在 Dreamweaver 中 新 建 html10-10 页 面 ， 添 加 div 元 素 ， 实 现在 Mozilla 和 Opera 引擎 
下 颜色 线性 渐变 的 效果 ， 主 要 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


background: -moz-repeating-linear-gradient (120deg, #000,#000,#000, 
#333, 提 666, #999,#CCC, #FFF, #FFF, #FFF); 
background:-o-repeating-linear-gradient(120dqeg,#000,#000,#000,#333,， 非 
666, #999, #CCC, #FFF, #FFF, #FFF); 
' 
</style> 
<body bgcolor="#FFCCFF"> 
<div><p></br></br> 善 于 观察 大 自然 风 够 的 层 格 涅 夫 , 对 于 日 出 作 过 精彩 的 描绘 : </br> 
</p> 
<p> 朝 阳 初 升 时 ， 并 未 卷 起 一 天 火 云 ， 它 的 四 周 是 一 片 浅 玫瑰 色 的 展 眶 。 太 阳 并 不 厉害 ,不 像 在 令 
人 室 息 的 干旱 的 日 子 里 ， 那 么 炽热 ， 也 不 是 在 上 暴风雨 之 前 的 那 种 暗 紫 色 ， 却 带 着 一 种 明亮 而 柔和 的 
光芒 ， 从 一 片 狭长 的 云层 后 面 隐隐 地 浮 起 来 ， 露 了 露面 ， 然 后 就 又 躲 进 它 周 围 淡淡 的 紫 雾 里 去 了 。 
在 舒展 着 云层 的 最 高 处 的 两 边 闪烁 得 有 如 一 条 条 发 亮 的 小 蛇 ; 亮 得 像 擦 得 耀眼 的 银 器 。 可 是 ， 孜 ! 
那 跳跃 的 光 柱 又 向 前 移动 了 ， 带 着 一 种 肃穆 的 欢 悦 ， 向 上 飞 似 的 拥 出 一 轮 朝日 。</br></P> 
<p></br> 一 摘自 ” 刘 白 羽 《 日 出 》</p> 
</div> 
</body> 


上 述 代 码 中 120deg 是 设置 渐变 的 角度 ， 而 #000,#000,#000,#333,#666,#999,#CCC,#FFF， 


三 FEF 手 FF 是 从 白色 到 灰色 再 到 黑色 的 渐变 。 运行 上 述 代 码 ， 在 Firefox 浏览 器 中 的 效果 如 
图 10-16 所 示 。 


加 回回 
| 呈 国 于 二 了 
fil 加 


村 i 
太阳 并 不 人 


图 10-16 线性 渐变 一 般 应 用 效果 图 


指定 角度 时 渐变 是 沿 水 平 线 按 逆 时 针 旋 转 定 位 的 。 因 此 ， 设 置 0deg， 表示 
从 左 到 右 的 线性 渐变 ; 设置 90 度 ， 表 示 从 下 到 上 的 渐变 ; 上 述 示例 中 设置 
的 为 120 度 ， 则 表示 从 右 下角 到 左上 角 。 


。 2 在 Webkt 引擎 下 的 两 入 不 同 的 应 用 


在 Webkit 引擎 下 实现 颜色 渐变 功能 的 语法 主要 有 2 种 。 第 1 种 语法 类 似 于 在 Mozilla 
和 Opera 引擎 下 的 基本 语法 ， 只 需要 将 代码 书写 为 “-webkit-linear-gradient” 的 形式 。 语 法 
格式 如 下 所 示 : 


第 1 种 语法 的 参数 同 Mozilla 和 Opera 引擎 下 的 基本 语法 中 的 参数 一 样 ， 
这 里 不 再 进行 过 多 的 介绍 。 


而 线性 渐变 在 Webkit 引擎 下 的 第 2 种 语法 的 代码 如 下 所 示 : 


Webkit 引擎 下 的 浏览 器 中 ， 第 2 种 语法 参数 的 主要 说 明 如 下 所 示 : 

口 type 表示 渐变 的 类 型 ， 包 括 线性 渐变 (linear ) 和 径 向 渐变 (radial )。 

口 xl yl 和 x2 y2 表示 颜色 渐变 体 两 个 点 的 坐标 。xl、y1、x2 和 y2 的 取 值 范围 为 
09%6~100%， 当 它们 取 极 值 的 时 候 ，xl 和 x2 可 以 取 值 left( 或 0%) 或 right(100%)， 
yl 和 y2 可 以 取 值 top(0%) 或 bottom( 或 100%)。 

口 form(color value) 函数， 表示 渐变 开始 的 颜色 值 。 

to(color value) 函数， 表示 渐变 结束 的 颜色 值 。 

口 color-stop0 定义 颜色 步 长 。color-stop(0 函 数 包 含 两 个 参数 值 ， 第 一 个 参数 值 指定 
色 标 位 置 ， 可 以 是 数值 或 百分比 ， 取 值 范围 为 0~ 1 (或 者 0%~100%)， 第 二 个 参 
数值 指定 任意 的 颜色 值 。 一 个 渐变 可 以 包含 多 个 色 标 。 

另外 关于 参数 xl yl 和 x2 y2 有 4 种 情况 ， 有 具体 说 明 如 表 10-1 所 示 。 


表 10-1 参数 xl yl 和 x2 y2 的 不 同情 况 


口 


xl 等 于 x2，y1 不 等 于 了 2 实现 径 向 渐变 ， 调 整 y1 和 y2 的 值 可 以 调整 渐变 半径 大 小 

yl 等 于 y2，xl 不 等 于 x2 实现 线性 渐变 ， 调 整 x1 和 x2 的 值 可 以 调整 渐变 半径 大 小 

y1 不 等 于 y2，xl 不 等 于 了 2 实现 角度 渐变 (可 以 是 线性 渐变 或 径 向 渐变 ) ， 当 x1、x2、yl 和 y2 
取 值 为 极 值 的 时 候 接近 径 向 渐变 或 水 平 渐变 

Xl 等 于 x2，y] 等 于 y2 没有 渐变 ， 取 函数 form0 的 颜色 值 


在 Dreamweaver 中 新 建 html10-11 页 面 ， 添 加 div 元 素 ， 实 现 颜色 在 Webkit 引擎 下 线 
性 渐变 第 2 种 语法 的 效果 ， 主 要 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


margin-left: auto7 

margin-top: auto7 

width:500px; 

height:300px; 

border:25px groove #639; 

background: -webkit-gradient (linear,40% 30%,60% 70%,from( #FFF), 

to ( #000),color-stop(50%,#666),color-stop(50%, #333)); 
} 
</style> 
<body> 
<div><p> 这 就 是 白杨 树 ， 西 北极 普通 的 一 种 树 ， 然 而 决 不 是 平凡 的 树 ! </p><p> 它 没有 婆 效 的 姿 
态 ， 没 有 届 曲 盘旋 的 岂 枝 。 也许 你 要 说 它 不 美 ， 如 果 美 是 专 指 " 婆 效 "或 " 旁 逸 斜 出 "之 类 而 言 ， 那 么 ， 
白杨 树 算 不 得 树 中 的 好 女子 ; 但 是 它 伟岸 ， 正 直 ， 朴 质 ， 严 肃 ， 也 不 缺乏 温和 ， 更 不 用 提 它 的 坚强 
不 届 与 挺拔 ， 它 是 树 中 的 伟 丈 夫 ! 难道 你 又 不 更 远 一 点 想到 这 样 枝 枝 叶 叶 靠 紧 团结 ， 力 求 上 进 的 白 
杨 树 ， 宛 然 象 征 了 今天 在 华北 平原 纵横 决 荡 ， 用 血 写 出 新 中 国 历史 的 那 种 精神 和 意志 ? </p> 
<p> 一 摘自 茅盾 《白杨 礼赞 》</p> 
</div> 
</body> 


上 述 代码 中 “linear” 是 指定 渐变 类 型 为 线性 渐变 , “40% 30%” 和 “60% 70%” 分 别 
指 两 个 点 的 坐标 ,“from(#FFF)” 表 示 渐 变 从 白色 开始 ,“to#000)” 表 示 渐 变 到 黑色 结束 ， 
“color-stop(50%, #666),color-stop(50%, #333)” 用 来 定义 颜色 步 长 ， 分 别 为 浇 灰 色 和 和 深 闷 色 ， 
即 整 体 来 看 是 从 白色 到 浅 灰 色 ， 再 从 深 灰 色 到 黑色 。 运 行 上 述 代 码 ， 在 Chrome 浏览 器 中 
的 效果 如 图 10-17 所 示 。 


癌 线性 渐变 2 
经 file:///D:/zlijcss/htnl10-11.htnl 


杨 树 ， 西 北极 普通 的 一 种 树 ， 


图 10-17 Webkit 引擎 下 线性 渐变 第 2 种 语法 效果 图 


10.5.2 ” 径 向 渐变 


径 向 渐变 是 圆 形 或 者 椭圆 形 渐变 。 颜 色 不 再 沿 着 一 条 直线 轴 变 化 ， 而 是 从 一 个 起 点 朝 
所 有 方向 混合 变化 。 

径 向 渐变 和 线性 渐变 类 似 ， 这 一 节 主要 分 为 2 部 分 : 第 1 部 分 介绍 径 向 渐变 在 Mozilla 
和 Opera 引擎 下 的 基本 语法 应 用 ;第 2 部 分 介绍 径 向 渐变 在 Webkit 引擎 下 的 两 种 不 同 应 用 。 


一 人 在 Mozlla 引擎 和 Opera 引擎 下 的 一 角 应 用 


径 向 渐变 语法 如 下 所 示 : 

其 中 比较 常用 的 参数 如 下 所 示 : 

口 point 表示 渐变 的 起 点 和 终点 ,可 以 使 用 坐标 表示 , 也 可 以 使 用 关键 字 , 例如 (0.0) 
或 者 (lefttop ) 等 。 

口 angle 定义 渐变 的 角度 ， 主 要 包括 deg ( 度 ，1 周 等 于 360deg )、grad ( 梯度 ，90 
度 等 于 100grad )、rad ( 弧度 ，1 周 等 于 2*PIrad )。 默 认为 0deg。 

口 shape 定义 径 向 渐变 的 形状 ， 包 括 circle ( 周 ) 和 ellipse (椭圆 )， 默 认为 ellipse。 

口 size 用 来 定义 圆 或 椭圆 大 小 的 点 。 其 值 主要 包括 closest-side、closest-corner、 
farthest-side、farthest-corner、contain 和 cover 等 。 

口 stop 定义 步 长 ， 可 以 省 略 。 其 用 法 和 上 一 节 介 绍 的 在 Webkit 引擎 的 colorstop0 


函数 相似 , 但 是 该 参数 不 需要 调用 函数 ,直接 传递 参数 即 可 。 第 1 个 参数 设置 颜色 ， 
可 以 为 任何 合法 的 颜色 值 ， 第 2 个 参数 设置 颜色 的 位 置 ， 取 值 为 百分比 或 数值 。 

在 Dreamweaver 中 新 建 html10-12 页 面 ， 添 加 div 元 素 ， 实 现 颜 色 径 向 渐变 的 效果 ， 
主要 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


<dqiv><p> 有 形 的 围墙 围 住 一 些 花 ， 有 紫 蔗 、 月 季 、 喇 叭 花 、 圣 诞 红 之 类 。 天 地 相连 的 那 一 道 弧 线 ， 
是 另 一 重 无 形 的 围墙 ， 也 围 住 一 些 花 ， 那 些 花 有 条 状 有 片 状 ， 有 红 ， 有 白 ， 有 绚烂 ， 也 有 飘落 。 也 
许 那 是 上 帝 玩 赏 的 牡丹 或 芍药 ， 我 们 叫 它 云 或 霞 。 空 气 在 山上 特别 清新 ， 清 新 的 空气 使 我 党 得 呼吸 
的 是 香 ! </p> 

<P> 光 线 以 明亮 为 好 ， 小 屋 的 光线 是 明亮 的 ， 因 为 屋 昌 小 ， 窗 很 多 。 例 外 的 只 有 破晓 或 入 幕 ， 那 时 
山上 只 有 一 片 微 光 ， 一 片 柔 静 ， 一 片 宁 谱 。 小 屋 在 山 的 怀抱 中 ， 犹 如 在 花车 中 一 般 ， 慢 慢 地 花蕊 绽 
开 了 一 些 ， 好 像 群 山 后 退 了 一 些 。 山 是 不 动 的 ， 那 是 光线 加 强 了 ， 是 早晨 来 到 了 山中 。 当 花 状 微微 
收拢 ， 那 就 是 夜晚 来 临 了 。 小 屋 的 光线 既 富 于 科学 的 时 间 性 ， 也 富 于 浪漫 的 文学 性 。</P> 

<p> 一 摘自 李 乐 葵 《 我 的 空中 楼 阁 》</p> 

</div> 

</body> 


上 述 代码 中 “80px 20px” 表 示 渐 变 的 起 点 和 终点 ,“ 手 00, 纤 F0, 妇 CC” 表 示 颜 色 从 红 


色 到 黄色 再 到 青 蓝 色 渐 变 。 运 行 上 述 代码 ， 在 Chrome 浏览 器 中 的 效果 如 图 10-18 所 示 。 


图 10-18 径 向 渐变 一 般 应 用 效果 图 


一 2， 在 Webkit 引擎 下 的 两 种 不 同 的 应 用 一 


上 节 介 绍 线性 渐变 的 时 候 , 学 习 了 Webkit 引擎 浏览 器 下 线性 渐变 的 两 种 语法 应 用 , 本 


节 介绍 在 Webkit 引擎 下 径 向 渐变 的 两 种 不 同 的 用 法 。 第 1 种 语法 类 似 于 在 Mozilla 和 Opera 
引擎 下 的 基本 语法 ， 只 需要 将 代码 书写 为 “-webkit-radial-gradient” 的 形式 即 可 。 语 法 格式 
如 下 所 示 : 


-webkit-radial-gradient( [<point> || <angle>, ]? [<shape> || <size>,] ?<stop>， 
<stop>[,<stop>]* ) //Webkit 


第 2 种 语法 可 以 定义 渐变 的 类 型 为 线性 渐变 (linear) 和 径 向 渐变 (radial)。 但 是 相对 


于 线性 渐变 来 说 ， 径 向 渐变 稍微 复杂 一 些 。 另 外 ， 使 用 “-webkit-gradient” 属 性 不 仅 可 以 


定义 渐变 背景 ， 还 可 以 定义 渐变 边框 、 填 充 内 容 以 及 设计 图 标 等 。 


第 1 Os 


背景 、 边 框 和 渐变 的 相关 属性 


在 Dreamweaver CS5 中 新 建 html10-13 页 面 ， 页 面 中 添加 div 元 素 , 在 div 元 素 的 样式 
中 使 用 “-webkit-gradient” 属 性 定义 径 向 渐变 的 起 点 和 终点 并 且 设置 起 始点 的 长 度 ， 主 要 
代码 如 下 所 示 : 


<style type="text/css"> 
divt{ 
margin-left: auto; 
margin-top: auto; 区 
width:500px; 
height:300px; 
border:25px groove #FCO0; 
background: -webkit-gradient (radial,200 150,30,200 150,200, Erom (#FCO) ， 
to( #99F)); 
—webkit-background-origin:padding-box; 
—webkit-background-clip:content-box; 
} 
</style> 
<body bgcolor="#66CCFF"> 
<div><p> 江 南 ， 秋 当然 也 是 有 的 ; 但 草木 雕 得 慢 ， 空 气 来 得 润 ， 天 的 颜色 显得 淡 ， 并 且 又 时 常 多 
雨 而 少 风 ; 一 个 人 夹 在 苏州 上 海 杭 州 ， 或 厦门 香港 广州 的 市 民 中 间 ， 浑 浑 沌 沌 地 过 去 ， 只 能 感到 一 
点 点 清凉 ， 秋 的 味 ， 秋 的 色 ， 秋 的 意境 与 姿态 ， 总 看 不 他 ， 尝 不 透 ， 赏 玩 不 到 十 足 。 秋 并 不 是 名 花 ， 
也 并 不 是 美酒 ， 那 一 种 半 开 ， 半 醉 的 状态 ， 在 领略 秋 的 过 程 上 ， 是 不 合适 的 。</p> 
<p> 北 国 的 槐 树 ， 也 是 一 种 能 使 人 联想 起 秋 来 的 点 组 。 像 花 而 又 不 是 花 的 那 一 种 落 芯 ， 早 展 起 来 ， 
会 铺 得 满 地 。 脚 踏 上 去 ， 声 音 也 没有 ， 气 味 也 没有 ， 只 能 感 出 一 点 点 极 微细 极 柔软 的 触觉 。 扫 街 的 
在 树 影 下 一 阵 扫 后 ， 灰 土 上 留 下 来 的 一 条 条 扫 晕 的 丝 纹 ， 看 起 来 既 觉 得 细腻 ， 又 觉得 清闲 ， 潜 意识 
下 并 且 还 觉得 有 点 儿 落 寞 , 古人 所 说 的 梧桐 一 叶 而 天 下 知 秋 的 怕 想 , 大约 也 就 在 这 些 深 沈 的 地 方 。</P> 
<p> 一 摘自 郁达夫 《 故 都 的 秋 》</p> 
</div> 
</body> 


上 述 代 码 中 “radial” 表 示 渐 变 类 型 为 径 向 渐变 ,“200 150” 指 的 是 圆心 坐标 ,“30 和 
200” 分 别 是 两 圆 的 半径 ,“from( 考 C0),to( #99F)” 表 示 从 黄色 到 紫色 的 渐变 。 运 行 上 述 代 
码 ， 在 Chrome 浏览 器 中 的 效果 如 图 10-19 所 示 。 


径 向 渐变 2 


© OD file:///D:/zljcss/htal10-13.htal 


摘自 部 达 夫 < 故 都 的 秋 》 


图 10-19 Webkit 引擎 下 径 向 渐变 第 2 种 语法 效果 图 


10.5.3 ”重复 渐变 


如 果 需 要 创建 一 种 在 一 个 元 素 的 背景 上 重复 的 渐变 “模式 ”。 虽 然 可 以 通过 重复 背景 
图 像 〈 使 用 background-repeat) 创建 线性 重复 渐变 ， 但 是 没有 创建 重复 的 径 向 渐变 的 类 似 
方式 。CSS 3 通过 使 用 repeating-linear-gradient 和 repeating-radial-gradient 语法 实现 了 重复 
渐变 的 功能 。 

在 Dreamweaver CS5 中 新 建 html10-14 页 面 ， 页 面 中 新 增 两 个 div 元 素 ， 分 别 用 来 显 
示 线 性 重复 渐变 和 径 向 重复 渐变 的 效果 。 主 要 代码 如 下 所 示 : 


第 ] Us 


背景 、 边 框 和 渐变 的 相关 属性 


<p> 一 毛泽东 《这 园 春 . 雪 》</p></div><center> 线 性 重复 渐变 </center> 
<div id=”"div2”></br></br></br></br><p>g&nbsp; gnbsp; gnbsp; gnbsp; 北 国 风 
光 ， 千里 冰 封 ， 万 里 雪 飘 。 望 长 城内 外 ， 惟 余 莽 医 ; 大 河上 下 ， 顿 失 滔滔 。 山 舞 银 蛇 ， 原 驰 蜡 
象 ， 欲 与 天 公 试 比 高 。 须 晴 日 ， 看 红 装 素 庄 ,分 外 妖娆 。 江山 如 此 多 娇 ， 引 无 数 英雄 竞 折 腰 。 
惜 秦 皇 汉 武 ， 略 输 文采 ; 唐 宗 宋 祖 ， 稍 逊 风骚。 一 代 天 骄 ， 成 吉 思 汗 ， 只 识 弯 弓 射 大 雕 。 俱 往 
矣 ， 数 风流 人 物 ， 还 看 今朝 。</P> 

<p> 一 毛泽东 《这 园 春 . 雪 》</p></div><center> 径 向 重复 渐变 </center> B51) 

</body> 


上 述 代码 在 <body> 中 选择 <div id="divl"> 则 展示 的 是 线性 重复 渐变 ， 选 择 <div id= 
"div2"> 则 展示 的 是 径 向 重复 渐变 ， 在 Chrome 浏览 器 中 的 效果 如 图 10-20 和 图 10-21 所 示 。 
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图 10-20 ”线性 重复 渐变 效果 图 图 10-21 径 向 重复 渐变 效果 图 


10.6 ”项目 案例 3: 设计 填充 内 容 效 果 


在 前 面 的 章节 中 学 习 了 线性 渐变 、 径 向 渐变 和 重复 渐变 的 用 法 ， 本 节 将 通过 这 些 知识 
来 实现 设计 填充 内 容 效果 的 操作 。 

【实例 分 析 】 

随 着 DIY 越 来 越 流 行 ， 用 户 越 来 越 喜爱 自己 动手 做 东西 ， 对 于 某 个 模块 的 填充 内 容 也 
不 例外 。 本 节 项 目 案例 主要 使 用 CSS 3 中 渐变 的 各 个 用 法 来 实现 设计 填充 内 容 的 效果 。 

实现 设计 填充 内 容 效 果 的 主要 步骤 如 下 所 示 。 

(1) 首先 在 Dreamweaver 中 新 建 html10-15 页 面 ， 添 加 div 元 素 。 页 面 的 具体 代码 如 
下 所 示 : 


<body bgcolor="#FFCCFF"> 
<div id="div1"> 
<div class="before"></div> 
</div> 
</body> 


(2) 为 页 面 的 元 素 添加 相关 的 样式 ， 具 体 样式 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


#divif{ 
border:10px solid #96F; 
margin-left:10px; 
margin-top:10px; 
width:500px; 
height:300px; 
—webkit-border-radius:10px; 
—webkit-box-shadow:0 0 12px lpx rgbs(205,205,205,1); 
background:-webkit-gradient (linear, left top,left bottom,from(#F00), 
to ( #6C0),color-stop(50%,#FF0 ),color-stop(50%,#6CF)); 
float:left; 
} 
.beforef{ 
border:10px solid #36F; 
width:500px; 
height:300px; 
—webkit-border-radius:10px; 
content:-webkit-gradient (radial,200 150, 50,200 150, 120,from( #09F), 
tol(rgba(20,100,150,0)),color-stop(50%, #03F)); 
display:block; 
} 


上 述 代码 使 用 border-radius 属性 指定 圆 角 边框 ; 使 用 background 属性 定义 元 素 背景 渐 
变 的 效果 ; 使 用 float 指定 元 素 的 显示 方法 。 在 before 选择 器 中 首先 使 用 width 和 height 属 
性 指定 元 素 的 宽度 和 高 度 ; 使 用 border-radius 属性 指定 圆 角 边框 ; 将 content 属性 的 值 指定 
为 gradient() 来 实现 渐变 效果 。 
(3) 运行 本 示例 的 代码 并 查看 效果 ， 在 Chrome 浏览 器 中 的 效果 如 图 10-22 所 示 。 


口 设计 渐变 背景 
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图 10-22 ”设计 填充 内 容 效果 图 


10.7 习题 


一 、 填 空 题 


. 用 来 指定 背景 的 显示 范围 或 者 背景 的 裁剪 区 域 的 属性 是 

_ 属性 可 以 设置 边框 的 颜色 。 

.background-position 属性 中 的 
属性 可 以 用 于 绘制 圆 角 边框 。 

. 用 来 指定 平 铺 内 联 元 素 背景 图 像 的 循环 方式 需要 使 用 属性 。 

. 浏览 器 对 边框 分 割 图 像 时 ， 图 像 被 自动 分 割 为 部 分 。 


二 、 选 择 题 


1. 下 面 选项 中 ，background-origin 属性 的 参数 值 设 置 为 
边缘 作为 起 点 。 
A. border-box B. padding-box 
C. content-box D. margin-box 
2. 下 面 选项 中 属性 用 来 指定 背景 图 片 的 大 小 。 
A. background-size B. background-clip 


值 是 从 内 容 边缘 作为 起 点 给 图 像 定 位 的 。 


上 mb 一 


会 使 背景 图 像 以 内 容 


C. background-origin D. background-break 
3， 下 面 关于 渐变 说 法 的 选项 中 的 说 法 是 错误 的 。 
A. 重复 渐变 主要 包括 线性 重复 渐变 和 径 向 重复 渐变 ， 它 们 是 线性 渐变 和 径 向 渐变 
的 扩展 
B. 线性 渐变 主要 使 用 “-radial-gradient” 属 性, 径 向 渐变 主要 使 用 “-linear-gradient” 
属性 
C. 如 果 用 户 使 用 Firefox 浏览 器 并 且 想 要 实现 线性 渐变 的 功能 ， 需 要 将 代码 书写 
成 “-moz-linear-gradient” 的 形式 
D. 渐变 主要 包括 线性 渐变 、 径 向 渐变 和 重复 渐变 
4. 下 列 选 项 中 不 属于 渐变 类 型 一 种 的 是 
A. 线性 渐变 B. 横向 渐变 
C. 径 向 渐变 D. 重复 渐变 
5. 关于 背景 样式 的 说 法 中 ， 选 项 “是 错误 的 。 
A. background-size 属性 用 来 设置 背景 图 像 的 尺寸 
B. background-clip 属性 用 来 指定 背景 的 显示 范围 或 者 背景 的 裁 前 区域 
C. background-origin 属性 和 background-clip 属性 的 属性 值 一 样 ， 可 以 交换 使 用 
D. 将 background-break 属性 的 属性 值 设置 为 each-box， 表 示 背 景 图 像 在 每 一 行 中 
进行 平 铺 


三 、 上 机 练习 
使 用 相关 属性 制作 相框 


在 Dreamweaver 中 添加 HTML 页 面 ,在 页 面 的 合适 位 置 添加 div 元 素 并 制定 背景 图 像 ， 
然后 使 用 background-clip 属性 的 padding 值 来 设置 背景 的 显示 范围 。 页 面 的 最 终 运 行 效果 
如 图 10-23 所 示 。 
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10-23 ”上 机 实践 运行 效果 


10.8 ”实践 疑难 解答 


10.8.1 为 什么 使 用 border-radius 属性 无 法 设置 圆 角 边框 


CSS 3 中 为 什么 在 使 用 border-radius 属性 时 无 法 设置 圆 角 边框 
网 络 课 堂 : http:Wbbs.itzcn.comy/thread-19727-1-1.html 
【问题 描述 】 各 位 前 辈 好 ， 我 最 近 学 习 CSS 3 中 背景 、 边 框 的 相关 知识 ， 新 学 的 这 些 
属性 用 起 来 非常 方便 。 但 是 ， 我 却 遇 到 了 一 个 问题 ， 为 什么 有 时 候 border-radius 属性 无 法 
设置 圆 角 边 框 呢 ? 

【解决 办 法 】 这 位 同学 你 好 ， 这 个 问题 非常 简单 。border-radius 属性 适用 于 所 有 的 元 
素 ， 所 以 一 般 情况 下 用 border-radius 属性 都 能 成 功 地 设置 圆 角 边框 。 但 是 当 table 元 素 的 
border-collapse 属性 的 属性 值 设 置 为 collapse 时 , 此 属性 无 效 , 同样 的 , 在 使 用 border-image 
属性 时 也 是 这 样 。 所 以 ， 当 在 页 面 中 要 使 用 border-radius 属性 和 border-image 属性 来 设置 
边框 样式 时 ， 切 记 不 能 将 table 元 素 的 border-collapse 属性 值 设置 为 collapse。 


10.8.2 ”怎样 实现 径 向 渐变 非 同心 圆 的 效果 


CSS 3 中 怎样 实现 径 向 渐变 非 同 心 圆 的 效果 
下 全 网 络 课堂 : http://bbs.itzcn.com/thread-19728-1-1.html 

【问题 描述 }， 各 位 前 辈 好 ， 我 最 近 学 习 CSS 3 中 渐变 的 相关 知识 ， 了 解 了 线性 渐变 和 
径 向 渐变 的 用 法 ， 我 也 学 会 并 实现 了 径 向 渐变 同心 圆 的 设计 ， 但 是 我 不 清楚 怎样 实现 径 向 
渐变 非 同心 圆 的 设计 ? 

【解决 办 法 】 这 位 同学 你 好 ， 你 已 经 学 会 了 径 向 渐变 同心 圆 的 设计 ， 那 么 非 同心 圆 的 
实现 就 非常 简单 了 。 设 置 两 圆 的 坐标 为 一 个 点 ， 就 实现 了 同心 圆 的 效果 ， 当 内 圆 与 外 圆 的 
半径 大 小 不 同时 ， 所 显示 的 效果 也 不 相同 ;而 当 内 圆 和 外 圆 半 径 相 等 时 ， 则 渐变 无 效 。 设 
置 两 圆 的 坐标 为 不 同 的 点 ， 就 会 实现 非 同心 圆 的 效果 ， 当 内 圆 圆 心 和 外 圆 圆心 距离 大 于 或 
小 于 两 圆 半 径 的 差 时 ， 会 呈现 锥 形 的 径 向 渐变 效果 当 内 圆 圆 心 和 外 圆 圆心 距离 等 于 两 圆 
半径 的 差 时 ， 则 不 呈现 渐变 效果 。 


盒 模型 、 字 体 与 多 列 布局 
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盒 模型 是 CSS 的 基石 之 一 ， 它 指定 元 素 如 何 显示 以 及 《在 某 种 程度 上 ) 如 何 交 互 ， 在 
CSS 3 中 增加 了 几 个 盒 模 型 的 属性 ， 使 用 这 些 属性 可 以 指定 浏览 器 如 何 显示 超出 盒 容 纳 范 
围 的 部 分 内 容 ， 也 可 以 为 盒 添 加 阴影 效果 等 。 

Web 页 面 中 的 布局 是 指 在 页 面 中 如 何 对 标题 、 导 航 栏 、 主 要 内 容 、 脚 注 、 表 单 等 各 种 
构成 要 素 进 行 一 个 合理 的 编排 。 在 CSS 3 之 前 ， 主 要 使 用 float 属性 和 position 属性 进行 页 
面 中 的 简单 布局 , 但 是 它们 存在 一 些 缺 点 , 因此 , 在 CSS 3 中 增加 了 一 些 新 的 布局 方式 
多 列 布局 ， 使 用 这 种 布局 可 以 自动 将 内 容 按 指定 的 列 数 排列 。 

本 章 将 详细 讲解 盒 模型 和 多 列 布局 的 相关 属性 ， 以 及 这 些 属 性 的 具体 应 用 。 

本 章 学 习 要 点 : 

> 熟练 掌握 使 用 box-sizing 属性 定义 模型 解析 模式 

熟练 掌握 为 盒 添 加 阴影 的 属性 及 使 用 方法 
熟练 掌握 盒 模型 对 溢出 内 容 的 处 理 


> 

> 

> 熟练 掌握 使 用 resize 属性 实现 自由 缩放 功能 
> 掌握 外 轮 席 线 的 相关 设置 

> 熟练 掌握 为 文本 添加 阴影 的 属性 及 使 用 方法 
> 熟练 掌握 文本 溢出 时 的 显示 方式 设置 

> 熟练 掌握 文本 自动 换行 的 设置 

> 掌握 服务 器 端 字体 的 使 用 


> 熟练 掌握 使 用 font-size-adjust 属性 修改 字体 种 类 
> 熟练 掌握 多 列 布局 的 相关 设置 


11.1 完善 的 盒 模 型 


页 面 上 的 每 个 元 素 都 被 浏览 器 看 成 是 一 个 矩形 的 盒子 , 这 个 盒子 由 元 素 的 内 容 、 填 充 、 
边框 和 边界 组 成 。 网 页 就 是 由 许多 个 盒子 通过 不 同 的 排列 方式 (上 下 排列 、 并 列 排列 、 妊 
套 排列 ) 堆积 而 成 的 。CSS 3 在 CSS 2 的 基础 上 对 原来 的 盒 模型 功能 进行 了 完善 ， 增 加 了 

元 素 块 的 设置 和 外 轮廓 样式 的 控制 功能 。 


11.1.1 box-sizing 属性 


CSS 3 规范 新 增加 了 UI 模块 ， 该 模块 用 来 控制 与 用 户 界面 相关 效果 的 呈现 方式 。 在 


正 5.x 以 及 正 6、 正 7 浏览 器 中 ，border 和 padding 都 包含 在 width 或 height 之 内 。 这 为 设 
计 者 添加 了 不 少 麻烦 ， 而 在 符合 标准 的 浏览 器 中 ，width 和 height 仅仅 包含 在 内 容 中 ， 除 
去 了 border 和 padding 区 域 。 
为 了 兼顾 这 种 问题 ，CSS 3 对 盒 模型 进行 了 改善 ， 定 义 了 box-sizing 属性 ， 该 属性 能 
够 定义 盒 模型 的 尺寸 解析 方式 。box-sizing 属性 的 取 值 有 3 个 : 
口 content-box 该 值 为 默认 值 ， 表 示 元 素 的 宽度 (或 者 高 度 ) = 元 素 边框 宽度 + 元 素 
内 边 距 + 元 素 内 容 宽度 (或 者 高 度 )， 即 : bordertpadding+content ( width/height )。 
口 “border-box 该 值 表示 维持 下 传统 的 盒子 模型 (IE 6 以 下 版 本 )， 也 就 是 说 元 素 
的 宽度 (或 者 高 度 ) = 元 素 内 容 的 宽度 (或 者 高 度 )。 
口 inherit 继承 父 元 素 的 大 小 设置 。 
为 了 能 更 形象 地 表示 content-box 属性 值 和 border-box 属性 值 的 区 别 ， 可 以 看 示例 网 ， 
如 图 11-1 和 图 11-2 所 示 。 


文本 内 容 
文本 内 容 
| pr | 
114-2*16=82 
272+2*16=304 | 
11-1 content -box 示例 图 11-2 ”border-box 示例 图 


box-sizing 虽然 得 到 各 种 最 新 主流 浏览 器 的 支持 ,但 有 些 浏览 器 还 是 需要 加 
上 自己 的 前 级 : Mozilla 需要 加 上 -moz-; Webkit 内 核 需 要 加 上 -webkit-。 因 
此 ，box-sizing 兼容 浏览 器 时 需要 加 上 各 自 的 前 缓 才能 展现 box-sizing 属性 
的 效果 。 

通过 上 面 的 讲解 用 户 对 box-sizing 属性 有 了 一 个 大 概 的 了 解 ， 下 面 通过 一 个 实例 讲解 
box-sizing 属性 的 用 法 。 

【实践 案例 11-1】 

创建 box-sizing html 页 面 ， 在 该 页 面 中 定义 一 个 div 层 , 该 div 层 包含 两 张 图 片 ， 这 两 
张 图 片 的 应 用 样式 不 同 ， 实 现 的 效果 也 不 同 。 具 体 的 代码 如 下 所 示 : 


如 上 述 代码 所 示 ，div 层 中 的 第 一 张 图 片 应 用 的 样式 为 content-box， 该 样式 设置 box- 
sizing 属性 值 为 content-box; 第 二 张 图 片 应 用 的 样式 为 border-box， 该 样式 设置 box-sizing 
属性 值 为 borderbox。 这 两 种 属性 值 所 表示 的 盒 元 素 的 长 和 宽 是 不 同 的 ， 图 11-3 所 示 的 为 
box-sizing.html 页 面 的 运行 效果 。 


图 11-3 box-sizing 属性 示例 效果 


11.1.2 ”box-shadow 属性 


在 CSS 3 中 可 以 使 用 box-shadow 属性 使 元 素 框 在 显示 时 产生 阴影 效果 .该 属性 的 基本 
语法 如 下 所 示 : 


其 中 ,前 面 3 个 length 分 别 表示 阴影 水 平 偏 移 值 (可 取 正 负 值 )、 阴 影 垂 直 偏 移 值 ( 可 
取 正 负 值 )、 阴 影 模糊 值 ，color 表示 阴影 的 颜色 。 


除了 可 以 使 用 box-shadow 属性 为 元 素 框 设置 单 色 阴影 特效 之 外 ， 还 可 以 通过 为 
box-shadow 属性 设置 多 组 参数 值 实现 多 色 阴 影 效果 。 指 定 多 个 阴影 时 ， 使 用 逗号 将 多 组 参 
数值 进行 分 隔 。 

【实践 案例 11-2】 

创建 box-shadow.html 页 面 ， 在 该 页 面 中 定义 box-shadow 类 样式 ,设置 box-shadow 属 
性 值 ， 指 定 阴 影 的 相关 属性 ， 并 在 div 层 中 应 用 该 样式 。 具 体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


- 述 代 码 设 置 了 阴 
颜色 为 姓 F66FF。 在 浏览 


shador 尿 性 的 使 用 
C 


的 水 平 偏 移 值 为 10px、 垂 直 偏 移 值 为 Spx、 阴 影 的 
中 访问 该 页 面 ， 运 
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spx、| 明 旦 
运行 结果 如 图 11-4 所 示 。 


糊 值 为 12px、 


> | 
ais 
| 
图 11-4 box-shadow 属性 的 简单 应 用 示例 效果 
【实践 案例 11-3】 
本 案例 通过 为 box-shadow 属性 设置 多 组 参数 值 ， 实 现 了 多 色 阴 影 的 效果 。 修 改 box- 
shadow.html 页 面 代码 ， 为 box-shadow 属性 设置 多 组 参数 值 ， 如 下 面 的 代码 所 示 
<style type="text/css"> 
.box-shadow{ 


background-image:url (images/03.jpg); 
-moz-box-shadow:-10px 0 12px #FF66FF 
10px 0 12px blue, 
0 -10px 12px red, 
0 10px 12px green; 
—webkit-box-shadow:10px 0 12px #FF66FF 
10px 0 12px blue, 
0 -10px 12px red, 
0 10px 12px green; 
box-shadow:10px 0 12px #FF66FF 
10px 0 12px blue, 
0 -10px 12px red 


0 10px 12px green; 
margin-top:300px; 
width:400px; 


height:300px; 
} 
</style> 
<div class="box-shadow"></div> 


再 次 运行 box-shadow.html 页 面 


效果 如 图 11-5 
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图 11-5 box-shadow 属性 的 多 色 阴 影 示 例 效果 


11.1.3 overflow-x 和 overflow-y 属性 


overflow 是 CSS 2.1 规范 中 的 特性 ， 而 overflow-x 和 overflow-y 属性 则 是 CSS 3 基础 
盒 模型 中 新 添加 的 特性 。 其 中 ，overflow 属性 用 于 定义 对 象 的 内 容 超 过 其 高 度 及 宽度 时 如 
何 管理 内 容 ，overflow-x 属性 用 于 定义 当 对 象 的 内 容 超 过 其 指定 宽度 时 如 何 管理 内 容 ; 
overflow-y 属性 用 于 定义 当 对 象 的 内 容 超过 其 指定 高 度 时 如 何 管理 内 容 。overflow-x 和 
overflow-y 属性 的 基本 语法 如 下 所 示 : 


overflow-x:visible | auto | hidden | scroll 
overflow-y:visible | auto | hidden | scroll 


属性 值 说 明 如 下 所 示 。 
口 visible ”不 剪 切 内 容 也 不 添加 滚动 条 。 假 如 显 式 声明 此 默认 值 ， 对 象 将 被 剪 切 为 
包含 对 象 的 window 或 frame 的 大 小 ， 并 且 clip 属性 设置 将 失效 。 
口 auto 此 为 body 对 象 和 textarea 的 默认 值 ， 在 需要 时 剪 切 内 容 并 添加 滚动 条 。 
口 hidden 不 显示 滚动 条 。 
口 scroll 横向 (纵向) 显示 滚动 条 。 
【实践 案例 11-4】 
创建 overflow.html 页 面 ， 在 该 页 面 中 定义 一 个 div 层 ， 并 设置 该 div 层 的 水 平方 向 和 
垂直 方向 都 显示 滚动 条 。 代 码 如 下 所 示 : 


<style type="text/css"> 
“da 
overflow-x:scroll; 
overflow-y:scroll; 
width:450px; 
height:300px; 


如 上 述 代码 所 示 , 将 overflow-x 和 overflow-y 的 属性 值 都 设置 为 scroll， 表 示 横 向 和 纵 
向 都 带 有 滚动 条 。 运 行 overflow.html 页 面 ， 效 果 如 图 11-6 所 示 。 


ject/11f overflew.htnl 


冷 若 痢 风 送 ， 此 戏 已 散场 


千 后 耻 北 利 左 了 王 层 , 直 过 开导 宇和 虽 册 相 下 身上 (十 的 表 可 下 外表 二 站 
和 EF, INE, OE TE 
党 。 信 于 弛 双 织 二， 


人 生生 种 忆 下 和 个 人 等 是 卡 室 ， 芷 业 人 的 K 基 -后 情 本 - 
上 /全 有 的 天 的 划 和 aa 
总 全 是 ， 节 下 的 全 不 县 人 和 二 的 


图 11-6 ”overflow-x 和 overflow-y 属性 的 示例 效果 


11.1.4 ”resize 属性 


resize 是 CSS 3 中 新 增 的 一 个 非常 实用 的 属性 ， 该 属性 能 够 允许 用 户 自由 缩放 浏览 器 
中 某 个 元 素 的 大 小 。 在 此 之 前 ， 设 计 师 要 实现 相同 的 UI 效果 ， 需 要 借助 JavaScript 编写 大 
量 的 脚本 才能 够 实现 ， 这 样 既 费时 费力 ， 而 且 执 行 效率 也 很 低 。resize 属性 的 基本 语法 如 
下 所 示 : 


属性 值 说 明 如 下 所 示 。 

口 none 浏览 器 不 提供 尺寸 调整 机 制 ， 用 户 不 能 操纵 机 制 调节 元 素 的 尺寸 。 

口 both 浏览 器 提供 双向 尺寸 调整 机 制 ， 允 许 用 户 调节 元 素 的 宽度 和 高 度 。 

口 。horizontal 浏览 器 提供 单 向 水 平 尺寸 调整 机 制 ， 允 许 用 户 调节 元 素 的 宽度 。 
口 vertical 浏览 器 提供 单 向 重 直 尺寸 调整 机 制 ， 允 许 用 户 调节 元 素 的 高 度 。 

口 


inherit 默认 继承 。 


【实践 案例 11-5】 
本 案例 将 演示 如 何 使 用 resize 属性 设计 可 以 自由 调整 大 小 的 壁画 , 主要 代码 如 下 所 示 : 


如 上 述 代码 所 示 ， 必 须 同 时 定义 overflow 和 resize 属性 ， 否 则 resize 属性 声明 无 效 ， 
因为 元 素 默认 溢出 显示 为 visible。 运 行 访 页面， 效果 如 图 11-7 所 示 。 按 住 鼠 标 左 键 不 放 ， 
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向 右 下 角 拖 动 放 大 图 片 ， 直 到 达到 最 大 尺寸 为 止 ， 如 图 11-8 所 示 。 


EE 


DO file:///7:/project/ll/resize. btnl 
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图 11-7 缩小 后 的 壁画 效果 图 11-8 放大 后 的 壁画 效果 


11.2 文本 与 字体 


本 节 将 针对 CSS 3 中 与 文本 、 字 体 相 关 的 一 些 属性 做 详细 介绍 ， 其 中 包括 text-shadow 
属性 、text-overflow 属性 、word-break 属性 、word-wrap 属性 和 @font-face 属性 ， 以 及 font- 
size-adjust 属性 。 


11.2.1 ”text-shadow 属性 

在 CSS 3 中 可 以 使 用 新 增 的 text-shadow 属性 为 页 面 上 的 文本 添加 阴影 效果 。 其 基本 语 
法 格式 如 下 : 

text-shadow: <length> <length> <length> <color> 


其 中 , 前 面 3 个 length 分 别 用 于 指定 水 平方 向 上 阴影 的 位 置 、 垂直 方向 上 阴影 的 位 置 、 
阴影 的 模糊 半径 〈 值 越 大 模糊 范围 越 大 ， 省 略 时 表示 不 向 外 模糊 )，color 用 于 指定 阴影 的 
颜色 。 


目前 Safari、Firefox、Chrome 和 Opera 浏览 器 都 支持 text-shadow 属性 ， 
Internet Explorer 9 以 上 也 支持 。 


text-shadow 属性 与 box-shadow 属性 相同 ， 不 仅 可 以 为 文字 添加 单个 阴影 特效 ， 也 可 
以 为 文字 指定 多 个 阴影 , 并 且 针对 每 个 阴影 可 以 使 用 不 同 的 颜色 。 到 目前 为 止 ,只 有 Firefox 
浏览 器 、Chrome 浏览 器 及 Opera 浏览 器 对 这 个 功能 提供 支持 。 

【实践 案例 11-6】 

该 案例 通过 设置 text-shadow 属性 的 值 ， 为 一 段 蓝 色 文字 绘制 粉色 阴影 。 其 中 ,水 平方 
向 和 垂直 方向 的 阴影 位 置 都 为 5，text-shadow.html 文件 的 主要 代码 如 下 所 示 : 
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<style type="text/css"> 
.textshadow{ 
text-shadow:5px Spx Spx #FF66FF; 
color:blue; 
font-size:50px; 
font-weight:bold; 
font-family:" 华 文 行 楷 "; 
margin-top:50px; 
} 
</style> 
<div class="textshadow"> 岁 月 静 好 </div> 


运行 该 页 面 ， 效 果 如 图 11-9 所 示 。 


textrshsdov 属 性 的 使 用 
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图 11-9 ”text-shadow 属性 简单 应 用 示例 效果 


【实践 案例 11-7】 
该 案例 通过 为 text-shadow 属性 指定 多 组 参数 值 , 实现 为 文字 添加 多 个 阴影 
改 text-shadow.html 文件 中 的 text-shadow 类 样式 ， 为 text-shadow 属性 指定 多 组 
改 后 的 代码 如 下 所 示 : 
<style type="text/css"> 
.textshadow{ 
text-shadow:10px 10Px Spx #990099, 
20px 20px Spx #9966FF, 
30px 30px 5px #0099FF; 
color:blue; 
font-size:50px; 
font-weight:bold; 
font-family:" 华 文 行 楷 "; 
margin-top:50px; 


的 效果 。 修 
参数 值 ， 修 
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</style> 

<div class="textshadow"> 岁 月 静 好 </div> 

如 上 述 代 码 所 示 ， 为 文字 依次 指定 了 #990099、#9966FF、#0099FF 颜色 的 阴影 ， 同 时 
也 为 这 些 阴 影 指定 了 适当 的 位 置 。text-shadow.html 页 面 的 运行 效果 如 图 11-10 所 示 。 


口 teetrahatev 胡 性 更 
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图 11-10 text-shadow 属性 的 多 个 阴影 示例 效果 


11.2.2 text-overflow 属性 


在 设计 Web 页 面 时 ， 设 计 师 通常 会 给 栏目 设置 固定 宽度 。 这 样 一 来 ， 当 实际 内 容 超过 
宽度 时 , 为 了 避免 影响 整体 的 布局 必须 对 内 容 进行 截取 。 这 个 工作 之 前 多 是 使 用 JavaScript 
脚本 来 完成 。 而 在 CSS 3 中 新 增 的 text-overflow 属性 可 以 快速 解决 这 个 问题 。 

text-overflow 属性 的 作用 非常 明确 ， 就 是 决定 当 内 容 超 过 宽度 时 的 显示 方式 。 例 如 ， 
当 一 个 列表 的 宽度 为 100 像素 ， 而 内 容 有 120 像素 时 ， 使 用 该 属性 可 以 在 100 像素 处 显示 
一 个 省 略 号 ， 而 不 是 截取 。 其 语法 格式 如 下 所 示 : 


text-overflow:clip | ellipsis 


属性 值 说 明 如 下 所 示 。 
口 clip 当 内 容 超 出 宽度 时 对 其 进行 截取 。 
口 ellipsis 当 内 容 超出 指定 宽度 时 在 最 后 显示 省 略 号 标记 。 


text-overflow 属性 目前 得 到 了 IE 6 以 上 浏览 器 、Safari 浏览 器 以 及 Opera 
浏览 器 的 支持 。 使 用 Safari 浏览 器 时 ， 需 要 将 样式 代码 书写 成 

“-webkit-text-overflow” 的 形式 ; 使 用 Opera 浏览 器 时 ， 需 要 将 样式 代码 
书写 成 “-o-text-overflow” 的 形式 。 


【实践 案例 11-8】 
本 案例 将 通过 把 white-space 属性 值 设 定 为 nowrap， 使 得 元 素 框 右 端的 内 容 不 能 换行 
显示 ， 这 样 一 来 ， 元 素 框 中 的 内 容 就 在 水 平方 向 上 溢出 了 。 然 后 设置 text-overflow 属性 值 


为 ellipsis， 指 定 当 内 容 超 出 指定 宽度 时 在 最 后 显示 省 略 号 来 标记 。 具 体 的 代码 实现 如 下 
所 示 : 


运行 text-overflow.html 页 面 ， 效 果 如 图 11-11 所 示 。 
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口 text-ewe 昌 ew 属 性 的 使 用 
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冷 若 寒 风 逝 ， 此 戏 已 散场 


午后 二 阳光 币 硕 了 云 尾 ， 适 过 下 二 雷 三 本 员 旺 在 身上 心中 的 了 相 契 藉 - 
踏 着 时 间 的 光影 ,漫步 在 记忆 的 河 里 。 一 翰 韩 那么 清晰 ， 真实 得 让 人 … 


过 去 的 ， 就 不 再 重 来 实 然 问 想 起 大 话 西游 下 二 裤 的 月 光宇 息 ， 加 果 夫 


有 一 种 情感 中 思 名 ,有 一 种 思绪 叫 膏 情 ， 类 而 ， 思 名 的 信 习 是 美好 的 … 
有 一 种 痛苦 叫 园 忆 ， 有 一 种 伪 屋 叫 示 来， 革 文 n 过 去 时 和 格 示 时， 还 … 
人 生 是 一 种 艺 目 ， 守 个 人 都 是 艺 不 守 ,在 生 俞 的 长 着 上 尽情 正 酒 不 … 
在 川 沉 不 息 的 人 群 中 ， 旨 们 都 在 寻 砚 ， 拼 命 地 要 我 们 本 不 需要 而 且 毫 … 
“起 条 条 来 去 无 这 挂 ” 不 记 坦 是 哪 部 戏 里 邱 戏 词 ， 写 的 那样 真 切 ， 那 … 
洗 却 铀 华 尽 ， 此 戏 已 散场 人生 的 大 大 格 管 ， 带 不 走 一 衣 一 补 。 


图 11-11 text-overflow 属性 的 示例 效果 


11.2.3 ”word-break 属性 


在 CSS 3 中 ， 可 以 使 用 word-break 属性 来 设置 文本 自动 换行 的 处 理 方法 。 通 过 word- 
break 属性 的 指定 , 不 仅 可 以 使 浏览 器 实现 半角 空格 或 连 字符 后 面 的 换行 , 而 且 可 以 使 浏览 
器 实现 任意 位 置 的 换行 。word-break 属性 的 语法 格式 如 下 所 示 : 


word-break:normal | keep-all | break-all 


属性 值 说 明 如 下 所 示 : 

口 normal 使 用 浏览 器 默认 换行 规则 。 

口 keep-all 只 能 在 半角 空格 或 连 字符 处 换行 。 
口 ”break-all 允许 在 单词 内 换行 。 


word-break 原来 是 Internet Explorer 中 独自 发 展 出 来 的 属性 , 在 CSS 3 中 被 
Text 模块 采用 ， 现 在 也 得 到 了 Chrome 浏览 器 及 Safari 浏览 器 的 支持 。 另 
外 ，Chrome 浏览 器 与 Safari 浏览 器 对 keep-all 参数 值 不 提供 支持 ; 当 
word-break 属性 使 用 break-all 参数 值 时 ， 对 于 西方 文字 来 说 ， 允 许 在 单词 
内 换行 。 


【实践 案例 11-9】 


本 案例 通过 设置 word-break 属性 值 为 keep-all， 实 现 了 文本 的 自动 换行 效果 。 具 体 代 
码 如 下 所 示 : 


<style type="text/css"> 
.divt{ 
word-break: keep-all; 
width:500px; 
height:auto; 


页 面 的 运行 效果 如 图 11-12 所 示 。 


会 3 © 口 file:///F:/project/11/word-break htal 


一 份 寄居 于 笔下 的 情怀 


冷 月 里 辰 照 项， 冰河 冷淡 的 夜色 ， 代 是 破 碎 豚 指 碎 了 我 的 心 ， eT 
EE 只 因 想 你 ， 我 落笔 成 思 ， 撞 一 化 清 凤 ， 化 作 守 字 的 情 馈 

一 市 思 怠 惧 慢 ;更 扒 了 我 的 清 林 ;一 曲 高 别 浴 伤 ， 热 乱 了 我 的 心弦 ; 一 等 丹青 妙笔 ， 挥 新 
了 一 生 的 傅 夏 ; 一 打 卷 美 绒 城 ， 消 起 了 无 言 的 寂 室 ; 一 语 珍 重 天 源 ， 蔓 数 了 谁 的 感伤 ? 
岁月 条- ge 


荫 索 的 笛 声 药 线 于 苇 的 耳 时 ， 
进 别 高 的 伤感 ， 障 鹏 的 请 色 ， 
著 进 失 的 记忆 ,我 再 次 斋 起 1 


图 11-12 ”word-break 属性 的 示例 效果 


对 于 标点 符号 来 说 ， 当 word-break 属性 使 用 break-all 参数 值 时 ， 在 Safari 
浏览 器 与 Chrome 浏览 器 中 , 允许 标点 符号 位 于 行 首 , 而 在 Internet Explorer 
浏览 器 中 ， 当 word-break 属性 使 用 break-all 参数 值 时 ， 仍 然 不 允许 标点 符 
号 位 于 行 首 。 


11.2.4 ”word-wrap 属性 


对 于 西方 文字 来 说 ， 浏 览 器 在 半角 空格 或 连 字 符 的 地 方 进行 换行 。 因 此 ， 浏 览 器 不 能 


给 较 长 的 单词 自动 换行 。 当 浏览 器 窗口 比较 窗 的 时 候 ， 文 本 会 超过 浏览 器 的 窗口 ， 浏 览 器 
下 部 会 出 现 滚动 条 ， 使 用 户 通过 拖 动 滚动 条 的 方法 来 查看 没有 在 当前 窗口 中 显示 的 文字 。 
但 是 ， 这 种 比较 长 的 单词 出 现 的 机 率 不 是 很 大 ， 而 大 多 数 超过 当前 浏览 器 窗口 的 情况 
是 出 现在 显示 比较 长 的 URL 地 址 的 时 候 。 因 为 URL 地 址 栏 中 没有 半角 空格 ， 所 以 当 URL 
地 址 中 没有 连 字符 时 ， 浏 览 器 在 显示 时 是 将 其 视 为 一 个 比较 长 的 单词 来 进行 显示 的 。 
word-wrap 属性 用 于 确定 当 内 容 达 到 容器 边界 时 的 显示 方式 ， 可 以 是 换行 或 者 断 开 。 
其 基本 语法 格式 如 下 所 示 : 


属性 值 说 明 如 下 所 示 。 
口 normal 普通 换行 方式 ， 即 采用 浏览 器 的 默认 换行 方式 。 
口 ”break-word 当 内 容 遇 到 边界 时 断 开 换行 显示 。 


【实践 案例 11-10】 
本 案例 将 通过 设置 word-wrap 的 属性 值 为 break-word， 实 现 当 内 容 遇 到 边界 时 自动 断 
开 进行 换行 操作 的 效果 。 有 具体 的 代码 如 下 所 示 : 


该 页 面 的 运行 效果 如 图 11-13 所 示 。 


SS DC 口 fle://AE:/projeet/1lwrordrrap.html 


The furthest distance in 
the world 


Ts not between life and death Bat when 
stand in front of yon 
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The furthest distance in the world 


tit 
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图 11-13 ”word-wrap 属性 的 示例 效果 图 


11.2.5”@font-face 属性 


在 CSS 3 之前， 页 面 文字 所 使 用 的 字体 必须 已 经 在 客户 端 被 安装 才能 正常 显示 ， 在 样 
式 表 中 人 允许 指定 当前 字体 不 能 正常 显示 时 使 用 的 替代 字体 ， 但 是 当 这 个 替代 字体 在 客户 端 
中 也 没有 安装 时 ， 使 用 这 个 字体 的 文本 就 不 能 正常 显示 了 。 

为 了 解决 这 个 问题 ， 在 CSS 3 中 新 增 了 服务 器 端 字体 功能 ， 使 用 这 个 功能 ， 网 页 中 可 
以 使 用 安装 在 服务 器 端的 字体 ， 只 要 某 个 字体 在 服务 器 端 已 经 安装 ， 网 页 中 就 能 够 正常 
显示 。 

在 CSS 3 中 ， 可 以 使 用 @font-face 属性 来 定义 字体 ， 具 体 的 语法 格式 如 下 所 示 : 


efont-facel 属 性 : 值 | 
在 @font-face 属性 中 ， 可 以 指定 的 属性 值 如 表 11-1 所 示 。 
表 11-1 @font-face 属性 中 可 以 指定 的 属性 值 


font-family ”定义 字体 的 名 称 ， 必 需 


sc 定义 字体 的 URL 地 址 ， 必 需 
font-stretch ”设置 字体 是 否 伸缩 变形 ormal (默认 值 ): 将 缩放 比例 设置 为 标准 
wider: 将 伸缩 比例 设置 为 更 进一步 的 伸展 值 
narrower: 将 收缩 比例 设置 为 更 进一步 的 收缩 值 
condensed 、 ultra-condensed 、 extra-condensed 、 
semi-condensed 、 expanded 、 semi-expanded 、 
semi-condensed、extra-expanded、ultra-expanded 
font-style 定义 字体 的 样式 normal: 不 使 用 斜体 
italic: 使 用 斜体 
oblique: 使 用 倾斜 体 


inherit: 从 父 元 素 继承 


font-weight 设置 字体 的 粗细 normal: 使 用 浏览 器 默认 值 
bold: 使 用 粗 体 字符 
bolder: 使 用 更 粗 字 符 
lighter: 使 用 更 细 字 符 
100~900: 从 细 到 粗 定义 字符 , 使 用 的 值 必须 为 100 
的 整数 倍 ， 其 中 400 等 同 于 normal， 而 700 等 同 于 
bold 
font-variant 设置 字体 的 大 小 写 normal: 使 用 浏览 器 默认 值 
small-caps: 使 用 小 型 大 写字 母 
inherit: 从 父 元 素 继承 


font-size 设置 字体 大 小 


@font-face 有 一 个 增强 的 功能 ， 可 实现 字体 链接 ， 即 样式 表 可 以 引用 远程 计算 机 上 的 
特定 字体 文件 ， 供 浏览 器 下 载 和 使 用 。 例 如 ， 下 面 的 代码 就 是 引用 另 一 个 网 站 上 的 字体 : 


在 这 个 样式 中 ，@font-face 规则 指定 浏览 器 转 到 sre 描述 符 中 指定 的 URL， 以 下 载 包 
含 指定 字体 的 字体 文件 ， 然 后 p 元 素 可 以 使 用 这 个 字体 文件 定义 字体 。 

目前 CSS 3 定义 的 字体 类 型 以 及 对 应 的 提供 给 format0 函 数 的 参数 字符 串 如 表 11-2 
所 示 。 


表 11-2 CSS 3 定义 的 字体 类 型 以 及 对 应 的 提供 给 format0 函 数 的 参数 字符 串 


truetype TrueType 字体 -ttf 
opentype OpenType 字体 -ttf 和 .otf 
truetype-aat 带 有 Apple Advanced Typography .ttf 

扩展 的 TrueType 字体 
embedded-opentype 人 嵌入 式 OpenType .eot 
svg SVG 字体 .SVg 和 .svgz 


目前 ， 所 有 主流 浏览 器 都 支持 @font-face， 但 是 要 注意 Internet Explorer 仅 
支持 “.eot”( Embedded Open Type ) 类 型 字体 ,而 Firefox、Chrome、Safari 
和 Opera 浏览 器 支持 “ttf ”( True Type Font) 和 “.otf ”( Open Type Font) 
类 型 字体 。 


【实践 案例 11-11】 

本 案例 通过 设置 @font-face 属性 值 ， 实 现 自 定义 类 型 字体 的 功能 。 具 体 的 实现 步骤 如 
下 所 示 。 

(1) 从 http://www.google.com/webfonts 网 站 上 下 载 自 己 需要 的 字体 类 型 ， 下 载 的 文件 
为 一 个 ZIP 格式 的 压缩 包 ， 解 压缩 后 会 找到 一 个 “-ttt” 格 式 的 文件 ， 将 该 文件 复制 到 与 页 
面 同 目录 下 的 font 文件 夹 下 。 

(2) 创建 font-face.html 文件 ， 在 该 文件 中 定义 CSS 样式 ， 如 下 所 示 : 


上 述 代 码 定义 了 两 种 字体 ， 分 别 是 BoldFont 和 Regular， 它 们 引用 的 字体 文件 都 位 于 
font 目录 下 。 其 中 ，h3 元 素 使 用 BoldFont 字体 ; div 元 素 使 用 Regular 字体 。 
(3) 在 HIML 文件 的 <body> 与 </body> 标 签 之 间 添 加 主体 内 容 ， 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


运行 该 页 面 ， 效 果 如 图 11-14 所 示 。 


图 11-14 @font-face 属性 的 示例 效果 


@font-face 虽然 可 以 浏览 没有 安装 的 字体 的 显示 效果 ， 但 是 它 的 代价 是 需 
要 预先 将 字体 下 载 到 本 地 。 所 以 ， 如 果 字 体 文件 的 大 小 太 大 则 不 适合 使 用 


11.2.6 font-size-adjust 属性 


使 用 font-size-adjust 属性 可 以 达到 修改 字体 而 保持 文字 大 小 不 发 生变 化 的 目的 。 
font-size-adjust 属性 的 使 用 方法 很 简单 , 但 是 它 需 要 使 用 每 个 字体 自 带 的 一 个 aspect 值 ( 比 
例 值 )， 如 下 面 的 示例 代码 所 示 : 


<style type="text/css"> 
divt{ 
font-size:12px; 
font-family:"Times New Roman", Times, serif; 
font-size-adjust:0.46; 
} 
</style> 


如 上 述 代码 所 示 ，0.46 为 Times New Roman 字体 的 aspect 值 。 

在 将 字体 修改 为 其 他 字体 时 ， 使 用 aspect 值 可 以 保持 字体 大 小 基本 不 变 。 这 个 aspect 
值 的 计算 方法 为 x-height(x-height 是 指使 用 这 个 字体 书写 出 来 的 小 写 x 的 高 度 ,单位 为 px) 
值 除 以 该 字体 的 尺寸 。 如 果 某 个 字体 的 尺寸 为 100px, x-height 值 为 58px, 则 该 字体 的 aspect 
值 为 0.58， 因 为 字体 的 x-height 值 总 是 随 着 字体 的 尺寸 一 起 改变 的 ， 因 此 字体 的 aspect 值 
都 是 一 个 常数 。 表 11-3 所 示 为 一 些 常用 的 西方 字体 的 aspect 值 。 


表 11-3 常用 西方 字体 的 aspect 值 


字体 种 类 aspect 值 字体 种 类 aspect 值 
Verdana 0.58 Times New Roman 0.46 


Gill Sans 
Bermhard Modern 
Caflisch Script Web 
Fjemish Script 


Georgia 


在 font-size-adjust 属性 中 指定 aspect 值 并 且 将 字体 修改 为 其 他 字体 后 ， 浏 览 器 对 于 修 
改 后 的 字体 尺寸 的 计算 公式 如 下 所 示 : 


其 中 ，a 表示 实际 使 用 的 字体 的 aspect 值 ，b 表示 修改 前 字体 的 aspect 值 ，s 表示 指定 
的 字体 尺寸 ，c 为 浏览 器 实际 显示 时 的 字体 尺寸 。 

例如 ， 需 要 将 16px 的 Times New Roman 字体 修改 为 Comic Sans MS 字体 ， 字 体 大 小 
仍然 保持 16px 的 Times New Roman 字体 的 大 小 ， 则 需要 执行 如 下 步骤， 

(1) 查 到 Times New Roman 字体 的 aspect 值 为 0.46。 

(2) 查 到 Comic Sans MS 字体 的 aspect 值 为 0.54。 

(3) 将 0.54 除 以 0.46 后 得 到 近似 值 1.17。 

(4) 因为 需要 浏览 器 实际 显示 的 字体 尺寸 为 16px， 因 此 将 16 除 以 1.17， 得 到 近似 值 
14px; 然后 在 样式 中 指定 字体 尺寸 为 14px。 也 就 是 说 , 14px 的 Comic Sans MS 相当 于 16px 
的 Times New Roman 字体 。 


在 实际 使 用 过 程 中 ， 读 者 也 可 以 根据 需要 对 aspect 值 进行 微调 以 达到 最 满 
意 的 效果 ， 也 可 以 将 font-size-adjust 属性 的 属性 值 设 置 为 none， 等 同 于 不 
对 font-size-adjust 属性 进行 设置 ， 按 照 字体 原来 的 大 小 显示 。 


【实践 案例 11-12】 

本 案例 演示 了 font-size-adjust 属性 的 具体 应 用 。 在 该 示例 中 定义 3 个 div 元 素 ， 其 中 
一 个 div 元 素 的 字体 使 用 Comic Sans MS 字体 ， 另 外 两 个 div 元 素 的 字体 使 用 Times New 
Roman 字体 ， 具 体 代码 如 下 所 示 : 


这 段 代 码 的 运行 结果 如 图 11-15 所 示 。 


品 fent-size-aajnst 属 性 的 传闻 


§ DC MN tile:///z:/project/11/font-size-adjust.htal 立 | 人 


innisfree 


For Your 
Natural beauty 


11-15 font-size-adjust 属性 的 示例 效果 


接 下 来 ， 将 第 二 个 div 元 素 的 字体 从 Times New Roman 字体 修改 为 Comic Sans MS 字 
体 ， 但 是 要 保持 文字 大 小 不 变 ， 于 是 将 第 二 个 div 元 素 的 字体 改 为 Comic Sans MS 字体 ， 
字体 尺寸 改 为 14px，font-size-adjust 属性 值 微调 为 0.49。 样 式 代 码 如 下 所 示 : 


immisfree 


For Your 
Natural beavty 


图 11-16 修改 字体 后 的 示例 效果 


11.3 ”多 列 布局 


在 CSS 2.1 及 其 以 前 的 版 本 中 ， 如 果 需 要 设计 多 列 布局 ， 网 页 设计 师 常用 两 种 基本 方 
法 : 浮动 布局 和 定位 布局 。 浮 动 布局 比较 灵活 , 但 是 容易 发 生 错位 ， 影响 网 页 的 整体 效果 ， 
这 种 布局 方式 需要 设计 者 编写 大 量 附加 样式 代码 ， 或 者 添加 无 用 的 换行 标签 ， 这 些 都 给 网 
页 设计 增添 了 不 必要 的 工作 量 ;定位 布局 可 以 实现 精确 定位 ， 但 是 这 种 布局 方法 无 法 满足 
模块 的 自 适 应 能 力 ， 以 及 模块 之 间 的 文档 流 联动 的 需要 。 

为 了 解决 多 列 布局 的 难题 ，CSS 3 新 增 了 Multi-column Layout， 即 多 列 自动 布局 功能 。 
利用 多 列 布局 属性 可 以 自动 将 内 容 按 指 定 的 列 数 排列 ， 这 种 特性 特别 适合 报纸 和 杂志 类 的 
网 页 布局 。 本 节 将 详细 讲解 多 列 布局 的 基本 属性 、 用 法 和 实战 技巧 。 


11.3.1 columns 属性 


columns 是 多 列 布局 特性 的 基本 属性 ， 类 似 边 框 特性 中 的 border 属性 。 通 过 该 属性 ， 
可 以 设置 内 容 的 列 数 、 每 列 间隔 距离 和 每 列 的 宽度 ， 其 基本 语法 格式 如 下 所 示 : 


其 中 ，column-width 表示 列 宽度 ，column-count 表示 列 数 。 


© column-width 和 column-count 的 具体 用 法 参考 11.3.2 和 11.3.3 小 节 。 


【实践 案例 11-13】 

在 传统 报刊 杂志 中 ， 文 章 常 用 多 栏 显示 ， 这 样 方便 阅读 。 在 网 页 中 显示 大 段 文字 时 ， 
采用 多 栏 显示 ， 能 够 方便 利用 浏览 器 进行 阅读 。 本 案例 将 使 用 CSS 3 中 的 多 列 布局 特性 来 
实现 文章 多 栏 显示 的 功能 。 具 体 的 代码 如 下 所 示 : 


人 的 避 基带 和 天 的 疙 。 片 。 加 所 于 和 的 量 末 ， 
尘世 轮回 ， 宁 做 一 棵 小 草 。 和 gf 下 “中 机 月 本” 的 全 闪 ， 可 旦 总 ， 随 和 本 玉 扩 窗 加 六 上 二 恒基 过 
的 人 全 区区 的 曙光 一 本 及 一 各， 记忆 简章 ， 珊 来 一 训 和 的 区 


图 11-17 columns 属性 的 示例 效果 


11.3.2 ”column-width 属性 


column-width 属性 用 于 指定 对 象 单列 显示 的 宽度 ， 该 属性 可 以 与 其 他 多 列 布局 属性 配 
合 使 用 ， 其 基本 语法 格式 如 下 所 示 : 


其 中 ，<length> 是 由 浮 点 数 和 单位 标识 组 成 的 长 度 ， 不 可 为 负数 ，auto 表示 根据 浏览 
器 计算 值 并 自动 设置 。 


【实践 案例 11-14】 

本 案例 仍然 以 上 一 节 案例 为 基础 ， 设 计 body 元 素 的 列 宽度 为 300px: 如 果 网 页 内 容 能 
够 在 单列 内 显示 ， 则 会 以 单列 显示 ; 如 果 窗 口 足 够 宽 ， 且 内 容 很 多 ， 则 会 在 多 列 中 进行 显 
示 。 具 体 的 实现 代码 如 下 所 示 : 


如 上 述 代码 所 示 ， 在 body 元 素 的 样式 中 ， 定 义 网 页 列 宽 为 300px， 则 网 页 中 每 列 的 最 


大 宽度 为 300 px。 设置 column-width 属性 后 , 其 页 面 将 根据 窗口 的 宽度 自动 调整 展现 方式 ， 
如 图 11-18、 图 11-19 和 图 11-20 所 示 。 


‘3 G Dsile:/F:/project/ll/column vidth. htal IN 车 言 C Diile:///g:/project/1l/colmnrvidth html 守 M 


岁月 的 流失 ， 带 走 了 我 们 豆 枇 年 华 的 莲 勃 ， 畦 法 了 


侍 世 轮回 ， 宁 做 一 棵 小 草 
作者 :百花 女神 

小 省 状 色 中 ， 谅 风 绵延 着 秋 的 前 瑟 ， 荀 莹 苦 冬 的 寨 
痊 ， 纪 横 的 向 道 在 清冷 的 夜幕 下 一 片 寂然 ， 稀 乎 的 人 群 
油 零 了 思 轩 的 花 辩 ， 校 头 的 黄 叶 腿 去 了 原野 的 绿 色 ， 时 
光 的 手指 番 同 了 青春 的 画卷 ， 这 是 一 曲 居 伤 的 歌 ， 那 缕 
绕 加 心 的 旋律 包 起 了 多 少 粉红 的 回忆 ， 涛 洞 了 多 少 深情 
的 双 陶 ， 芒 得了 多 少 依 候 的 俩 影 ， 


尘世 轮回 ， 宁 做 一 棵 小 草 
作者 :百花 女神 
深 尝 基色 中 ， 谅 风 终 迄 者 秋 的 革 琴 ， 曹 苦 科 的 窜 论 ， 纪 机 的 街道 在 清 兴 


多 要 了 允 才 村 红 的 加 亿 ， 织 洞 了 多 少 深情 的 双眸 ， 箔 复 了 多 少 依 侧 的 倘 影 。 


候 岗 同 ， 我 张开双 恬 拥 抒 这 秋天 的 夜空 ， 起 感怀 一 下 “中 秋月 贺 ” 的 性 


的 角 防 ， 天 字 攻 页 ， 流 和 的 并 阳 ， 罕 和 于 人 
意 ， 可 是 空 及 的 心情 如 种 该 的 里 光一 样 败 落 一 地 ， 


， 概 这 寻 荐 它 所 来 的 模样。 依 态 于 昌之 中 
由 灼 间 ， 我 张开双 留 拥抱 这 秋天 的 夜 室 ， 兆 感 全 一 汤 机 委 明 的 阳光 ， 本 幻 的 家 虹 灯 所 区 看 区 的 欧 诺 ， 于 
下 “中 秋月 加 "的 名 ， a A 
Wo i 

长 委 发 


季节 的 和 加 想必 er 昨 


图 11-18 两 栏 显示 图 11-19 一 栏 显示 
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尘世 轮回 ， 宁 做 一 棵 小 草 
作者: 百花 女神 
浴 滩 玖 名 中 ， 凉 风 绵 延 着 秋 的 芋 瑟 ， 敬 芝 着 
冬 的 寒 移 ， 纵 棋 的 街道 在 清冷 的 夜幕 下 一 片 究 


然 ， 稀 否 的 人 和 群 调 零 了 思乡 的 花 各 ， 梳 头 的 黄 叶 
昭 去 了 硬 野 的 绿色 ， 时 光 的 手指 世间 了 者 天 的 画 


兴 ， 这 是 一 蝎 忱 伤 的 软 ， 那 绪 线 窜 心 的 旋律 勾引 


帐 移 司 ， 我 张开双 莉 拥 抱 这 秋天 的 太空， 想 
黔 剑 一 下 “中 秋月 图 ”的 任意 ， 可 是 空 芒 的 心 
情 如 秘 琉 的 星光 一 样 风 东 一 地 ， 足 过 自己 的 影子 
被 名 锐 的 光亮 拉 的 很 长 很 长 …… 


岁月 的 流失 ， 融 走 了 我 们 豆 焰 年 华 的 鞍 抛 ， 
防 淡 了 那些 年 轻 绚丽 的 色彩 ， 远 远 的 街灯 在 深 宣 
的 诠 名 中 新 名 ， 窗 外 ， 万 罕 霜 火 的 隐隐 的 的 证 这 
带 壹 的 天 幕 上 添 了 一 份 沉重 ， 生 活 中 许多 六 枚 的 


看 于 缠 揽 的 初 南 ， 随 看 季节 的 轮回 被 尘埃 层 居 禾 
善 ， 和 过 过 记忆 的 统 限 ， 原 来 一 切 者 被 风化 的 烟 将 
云 由 . 

神志 志 的 角落 ， 寂 容 藻 富 ， 流 落 的 光阴 ， 罕 
要 于 尘世 的 苍白 ,极力 追寻 看 它 原 来 的 机 样 。 依 
态 于 黑夜 之 中 渴 亡 狐 明 的 阳光 ， 欧 幻 的 锚 虹 灯 掠 
拱 着 共 的 静 诺 ， 那 一 后 汶 月 的 洪 靖 店 沧 光 红 尘 中 


彩 间 ， 在 几 动 后 变 富 ， 在 温 且 后 变 谅 ， 别 下 的 也 
只 是 一 些 记 忆 的 碎片 ， 如 重心 干 曾 既 的 温柔 , 执 


了 多 少 粉红 的 回忆 ， 沉 润 了 多 少 深 博 的 双 听 ， 菠 
得 了 多 少 依 人 的 傅 影 - 


11-20 三 栏 显示 


11.3.3 ”column-count 属性 


column-count 属性 用 于 设置 对 象 的 显示 列 数 ， 且 列 数 等 高 ， 其 语法 格式 如 下 所 示 : 
column-count:<integer> lauto 


其 中 ,<integer> 用 于 指定 列 数 , 取 值 为 大 于 0 的 整数 .如 果 column-width 和 column-count 
属性 没有 明确 值 ， 则 该 值 为 最 大 列 数 ，auto 表示 根据 浏览 器 计算 值 并 自动 设置 。 

【实践 案例 11-15】 

下 面 创建 一 个 案例 ， 设 置 column-count 属性 值 为 4， 则 无 论 浏览 器 窗口 如 何 调整 ， 页 


面 内 容 总 是 遵循 4 列 的 布局 显示 ， 主 要 实现 代码 如 下 所 示 : 


上 述 代码 的 运行 效果 如 图 11-21 所 示 。 
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每 个 人 都 是 一 道 风景 
作者 :般若 心 


定律 在 地 绽放 注定 。 悍 怕 死亡 ， 生 命 地 逝 。 亡 ， 倒 不 如 于 下 心 
了 必 有 凋谢 之 日 ， 叶 。。 去 任何 人 都 沉 得 是 可 

怕 的 ， 但 在 与 这 种 可 

怕 宛 宾 值 不 值得 . 在 

亏 拌 中 的 日 子 并 不 好 


图 11-21 column-count 属性 的 示例 效果 


11.3.4 column-gap 属性 


column-gap 可 以 定义 两 列 之 间 的 间距 ， 该 属性 的 语法 格式 如 下 所 示 ; 
column-gap:normal I<lengtp> 


其 中 ，normal 表示 浏览 器 按照 默认 设置 进行 解析 ， 一 般 为 lem; <length> 是 由 浮 点 数 
和 单位 标识 符 组 成 的 长 度 值 ， 不 可 为 负 值 。 


【实践 案例 11-16】 
本 案例 将 通过 设置 column-gap 和 line-height 属性 的 值 ， 设 计 玻 朗 的 文档 版 面 效 果 ， 以 
方便 阅读 大 量 的 文字 片段 。 主 要 的 实现 代码 如 下 所 示 : 


如 上 述 代码 所 示 , 通过 设置 column-gap 属性 的 值 为 3em, line-height 属性 的 值 为 2.Sem， 
使 文档 的 列 间距 为 3em、 行 高 为 2.Sem， 从 而 达到 了 玻 朗 的 文档 版 面 效 果 。 本 案例 的 运行 
效果 如 图 11-22 所 示 。 


图 11-22 column-gap 属性 的 示例 效果 


11.3.5 column-rule 属性 


column-rule 用 于 定义 列 与 列 之 间 的 边框 宽度 、 样 式 和 颜色 。 简 单 来 说 ， 类 似 于 border 
属性 。 但 column-rule 不 占用 任何 空间 位 置 , 在 列 与 列 之 间 改 变 其 宽度 并 不 会 改变 任何 元 素 
的 位 置 。 当 column-mle 的 宽度 大 于 column-gap 时 ，column-rule 将 会 和 相 邻 的 列 重合 ， 从 
而 形成 元 素 的 背景 色 ， 但 有 一 点 需要 注意 ，column-rule 只 存在 于 两 边 都 有 内 容 的 列 之 间 。 
其 基本 语法 格式 如 下 所 示 : 


属性 说 明 如 下 所 示 。 

口 <column-rule-width> 由 浮 点 数 和 单位 标识 符 组 成 的 数值 , 用 于 定义 column-rule 
的 宽度 ， 默 认 值 为 medium， 不 允许 取 负 值 。 

口 <column-rule-style> 用 于 定义 列 边框 的 样式 ， 其 默认 值 为 none， 当 取 值 为 默认 
值 时 ，column-rule-width 值 等 于 0。 


口 column-rule-color 用 于 定义 列 边框 的 颜色 ， 其 默认 值 为 前 景色 color 的 值 。 

【实践 案例 11-17】 

本 案例 以 上 一 节 的 示例 为 基础 , 通过 设置 column-rule 属性 的 值 为 列 边框 设计 样式 , 使 
其 能 够 有 效 地 区 分 各 列 之 间 的 关系 。 主 要 的 代码 实现 如 下 所 示 : 


如 上 述 代 码 所 示 ， 每 列 之 间 定 义 了 一 个 点 线 (dotted) 分 割 线 样式 、 线 宽 为 3px、 深 绿 
色 (#003300) 的 边框 。 运 行 效果 如 图 11-23 所 示 。 


图 11-23 ”column-mle 属性 的 示例 效果 


11.3.6 _ column-span 属性 


column-span 属性 可 以 定义 元 素 跨 列 显 示 , 也 可 以 设置 元 素 单列 显示 。 该 属性 的 基本 语 
法 如 下 所 示 : 


其 中 ，1 表示 横 跨 一 列 ，all 表示 横 跨 所 有 列 。 


+ 


【实践 案例 11-18】 
本 案例 将 通过 使 用 column-span 属性 ， 将 文章 的 标题 设置 为 横 跨 所 有 列 ， 并 居中 显示 。 
具体 的 实现 代码 如 下 所 示 : 


如 上 述 代码 所 示 ， 通 过 将 column-count 的 属性 值 设置 为 2， 定 义 该 页 面 以 两 列 布局 的 
形式 显示 ,而 在 body 元 素 中 包含 了 hl 和 h2 元 素 , 这 两 个 元 素 为 文章 的 标题 , 需要 跨行 显 
示 ， 故 又 分 别 将 这 两 个 元 素 的 column-span 属性 值 设置 为 1， 以 跨 所 有 列 来 显示 。 该 案例 
的 运行 结果 如 图 11-24 所 示 。 


父亲 有 泪 ， 父 亲 难 落 泪 
作者 : 随 风 小 酬 
而 用 半 所 半 过活 ， 连 提起 “是 天 与 妇 李 双 台 扣 了 7” 我 
他 话 科 香 了 半天 ， 从 于 千 有 而 个 宁 ， “议事 ”是 
可 过 7 会 ， 小 要 浊 :“ 打 电 罗 入 妆 ， 知 并 中 ? 首 才 
了 ! ”和 0 一 规 。 一 际 多 你 人 六。 起 趟 到， 这 玉生 ER 条 
让 二 的 志和， 如 人 寓于 出 了 加 此 4 人 全 型 之 还 。- 


“是 村 人 ,就 没有 亲 1” 祖 个 二 和 关 候 ， 交 要 便 村 这 避 话 各 避 了 


的， 区 过 志 了 - 区 昌 了 大 半 和 的 必 二 。 也 污 二 了 。 过年 网 家 。 
三 兴 东 当 员 红 竹 过 到 甩 二 隐 半 列 ,不 各 帮 同 。 人 天 加 发 中 必 
现 了 丙 要 要 全 。 而 年 目 守 ， 却 见 父亲 一 直 引 以 办 的 黑 发 ， 已 尽 : 
和 


图 11-24 ”column-span 属性 的 示例 效果 


11.3.7 column- 人 ll 属 性 


column-fill 属性 用 于 定义 多 列 的 高 度 是 否 统一 ， 该 属性 的 基本 语法 格式 如 下 所 示 : 


其 中 ，auto 表示 各 列 的 高 度 随 其 内 容 的 多 少 而 自动 变化 ; balance 表示 各 列 的 高 度 将 会 
根据 内 容 最 多 的 那 一 列 的 高 度 进行 统一 。 

【实践 案例 11-19】 

本 案例 将 通过 设置 column-filll 属性 值 为 auto,， 设 计 不 等 高 的 多 列 布局 效果 。 具 体 示 例 
代码 如 下 所 示 : 
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盒 模型 、 字 体 与 多 列 布局 


</head> 


<body> 
<h1> 花 的 海洋 </h1> 
<div id="divl"><img src="images/01.jpg" width="100%" height= 
"350"></diy> 
<div id="div2"><img src="images/62.jpg" width="100%" height= G89) 
"250"S></div> 

</body> 

</html> 


该 案例 的 运行 效果 如 图 11-25 所 示 。 


站 colwnn- fi 属性 的 使 用 
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图 11-25 column-file 属性 的 示例 效果 


11.4 项 目 案例 1: 设计 相册 浏览 页 面 


通过 本 章 的 学 习 了 解 到 使 用 CSS 3 中 的 新 增 属性 可 以 快速 地 对 页 面 进行 多 列 布局 ， 并 
且 每 列 的 显示 宽度 和 高 度 都 是 相同 的 ， 从 而 使 页 面 的 设计 效率 大 大 提高 ， 为 设计 者 带 来 了 
很 大 的 便利 。 本 节 将 通过 使 用 CSS 3 中 多 列 布局 的 相关 属性 ， 设 计 一 个 以 列表 形式 展现 的 
相册 浏览 页 面 。 

【实例 分 析 】 

无 论 是 在 博客 系统 中 ， 还 是 在 腾讯 空间 系统 中 ， 都 能 看 到 一 个 【相册 】 栏 目 ， 单 击 该 
栏目 ， 将 呈现 出 各 个 相册 组 的 封面 ， 并 以 列表 形式 展现 。 当 单 击 某 个 相册 组 的 封面 时 ， 系 
统 将 同样 以 列表 的 形式 显示 出 该 相册 组 中 的 照片 信息 ， 包 括 具体 的 照片 内 容 和 照片 描述 等 
信息 。 本 案例 将 运用 CSS 3 中 多 列 布局 的 相关 属性 来 制作 一 个 以 列表 形式 展现 的 相册 浏览 
页 面 ， 具 体 的 实现 代码 如 下 所 示 : 


盒 模型 、 字 体 与 多 列 布局 


<h2> 懂 慢 外 面 的 世界 </h2> 


<p><img src="images/006.j 


"140px"/></p> 
<h2> 我 也 会 玩 电 脑 </h2> 


<p><img src="images/007.j 


"140px"/></p> 
<h2> 睡 觉 的 狗 狗 </h2> 


<p><img src="images/008. 


"140px"/></p> 
<h2> 美 丽 童 话 </h2> 
<p><img src="images/009 
"140px"/></p> 
<h2> 骄 傲 的 公主 </h2> 
<p><img src="images/010 
"140px"/></p> 
<h2> 它 手 到 永远 </h2> 


</div> 


</body> 
</html> 


-jpg" 


Er 


width="140px" height= 


width="140px" height= 
width="140px" height= 
width="140px" 


height= 


width="140px" height= 
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如 上 述 代 码 所 示 ， 使 用 column-width 属性 指定 列 宽 为 150px， 使 用 column-count 属性 
指定 该 页 面 以 5 列 的 布局 显示 , 并 在 该 文档 的 主体 部 分 添加 了 10 张 图 片 , 每 张 图 片 的 宽度 
和 高 度 都 为 140px。 该 案例 的 运行 结果 如 图 11-26 所 示 。 


我 们 簿 是 玉 胆 褒 


村 某 壬 在 二 什么 


lls 


何 忆 外 而 的 世界 


BR/ 


帮手 到 永远 


图 11-26 相册 浏览 页 面 


项 目 案例 2: 设计 精美 的 多 列 网 页 版 式 


多 列 布局 适合 纯 文字 版 式 设计 ， 不 适合 做 网 页 结构 布局 。 灵 活 使 用 多 列 布局 特性 ， 可 


以 实现 在 多 列 中 显示 文字 和 图 片 ， 从 而 节省 大 量 的 网 页 空间 。 如 果 网 页 上 的 文字 过 长 ， 多 
列 布局 特性 就 能 够 发 挥 它 的 用 武之 地 。 本 案例 将 为 一 篇 《永恒 ， 之 约 》 的 文章 进行 排版 


设计 。 
【实例 分 析 】 
本 案例 需要 使 用 多 列 布局 、 多 重 背景 和 半 透 明 效 果 设 计 等 技术 ， 设 计 一 个 简洁 、 结 构 
层次 清晰 的 页 面 。 该 页 面 信息 从 上 到 下 ， 按 照 文章 标题 、 题 记 、 段 落 标题 、 段 落 内 容 等 信 
息 有 顺序 地 排列 在 一 起 。 主 要 的 实现 代码 如 下 所 示 : 


如 上 述 代 码 所 示 ， 定 义 文章 内 容 以 3 列 显示 ， 列 间距 为 3em， 列 边框 为 3px 的 灰色 虚 
线 ， 其 中 : 文章 的 标题 、 作 者 和 题记 为 跨 列 显示 ; 文章 的 首 字符 以 下 沉 的 形式 显示 ; 每 列 
的 背景 为 半 透 明显 示 效 果 。 在 浏览 器 中 浏览 该 页 面 ， 如 图 11-27 所 示 。 


wy 


是 觉 朝 天 党 奔 去 。 A 
地 天 回复 你 如若 嘱 一 天 做 出 了 一 个 决定 ， 二 是 了 的。 


伴 着 那么 坚定 的 自信 洋 道 青春 的 朝气 ， 再 性 多 
于 三 性， 明明 中 注定 湾 二 时 分 ， 是 这 样 天 庆 的 两 
季 。 之 后 ， 便 有 这 邓 ， 心 情 。 


祝福 ， 明 天 


在 每 个 人 面前 都 有 一 条 通 向 远方 的 中 ,虽然 
里 红 ,但 却 充满 项 望 。 带 着 一 壬 后 周 的 心 ， 为 明 
天 深情 祝福 


有 太 多 的 路 ， 是 我 们 自己 所 选择 的 ， 既 然 选 
璋 了 而 行 ， 只 有 让 目 己 发 至 管区 和 力量 ,才能 看 
到 明天 与 今天 的 不 同 ， 付 出 多 少 都 会 是 信 神 的 ， 
我 坚信 你 会 是 最 出 色 的 。 


订 久 远 的 吐 。 不 知 应 该 庆幸 ， 还 是 惊喜 ? 吃 语 ， 
和 


生活 ， 点 滴 


时, 全身 都 没有 力气 。 科 在 床上 ， 便 唾 荐 
7 


有 人 可以 下 佑 可 以 太 是 它 福 ,克基 是 阴 | 


天 。 此 情 此 景 ， 深 深 折射 出 一 种 心 归来 的 方向 ， 
不 是 其 地 ， 是 的 箱 的 不 能 再 的 逢 的 场景 我 冶 你 


的 东西 还 在 吗 ? 心 当 诉 我 ， 还 在 。 当 大 在 ， 怎 么 


吧 语 ,无 言 i 


11-27 ”精美 的 多 列 网 页 版 式 布局 


11.6 习题 


一 、 填 空 题 


1. 页 面 上 的 每 个 元 素 都 被 浏览 器 看 成 是 一 个 矩形 的 盒子 ， 这 个 盒子 由 元 素 的 填充 、 
边框 、 边 界 和 组成。 

2. 在 CSS 3 中 可 以 使 用 属性 使 元 素 框 在 显示 时 产生 阴影 效果 。 

3. CSS 3 中 设置 每 列 固定 宽度 使 用 的 属性 是 __。 

4. CSS 3 中 将 标题 横 跨 多 行 的 属性 是 。 


二 、 选 择 题 


1. 在 CSS 3 中 ， 
内 容 。 


属性 用 于 定义 当 对 象 的 内 容 超过 其 指定 宽度 时 如 何 管理 


A. overflow 


B. overflow-x 
C. overflow-y 
D. 以 上 都 可 以 
2. 可 以 使 用 属性 来 设计 文本 阴影 效果 。 
A. font-weidht 
B. text-indent 
C. text-transform 
D. text-shadow 
3. 假设 在 index.html 页 面 中 定义 了 一 个 名 称 为 #text 的 CSS 样式 ， 在 该 样式 中 指定 
text-overflow 属性 为 ellipsis。 同 时 在 该 文档 的 主体 部 分 含有 一 个 id 为 text 的 div 层 ， 则 当 
该 div 层 中 的 文本 内 容 超 出 指定 宽度 时 ， 文 本 将 如 何 处 理 ? 
A. 文本 将 进行 换行 显示 
B. 文本 将 在 最 后 显示 省 略 号 标记 
C. 文本 将 越过 div 层 ， 并 将 超过 的 部 分 显示 在 div 层 的 外 面 
D. 文本 将 截断 ， 不 显示 超过 该 div 层 宽度 的 文本 内 容 
4. 在 CSS3 中 设置 每 列 之 间 的 间隔 距离 使 用 哪 种 方法 最 快捷 。 
A. column-width 
B. column-rule-width 
C. column-gap 
D. 设置 div 属性 


三 、 上 机 练习 
设计 两 列 布局 的 CSS 3 百度 百科 页 面 


使 用 column-count 属性 和 column-width 属性 设计 两 列 布局 版 式 的 页 面 , 对 CSS 3 的 百 
度 百科 进行 重新 布局 ， 最 终 的 显示 效果 如 图 11-28 所 示 。 
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C55 概述 


Css3-Griad 布 局 图 中 蓝 色 的 线 不 会 出 现在 实际 的 网 页 中 。Grid 布 局 应 


Css 即 层 委 样 式 表 Cascadine Stylesheet ) 在 网 页 制作 时 采用 Css 技 “用 很 广泛 ， 最 简单 的 例子 就 是 内 容 的 分 栏 显示 。 
术 ， 可 以 有 效 地 对 页 面 的 布局 、 宇 体 ， 颜 色 、 背 悬 和 其 它 效果 实现 更 加 精 
确 的 控制 。 只 要 对 相应 的 代码 做 “ 些 简单 的 修改 ， 就 可 以 改 支 同 页面 对 丁 霸 边 这 个 布局 提示 的 三 栏 网 页 未 滋 ， 加 采 使 用 cssserid 机 局 的 
的 不 同 部 分 ， 或 者 页 数 不 同 的 网 页 的 外 观 和 格式 。 话 ， 我 们 只 需 这 样 写 : body {colunns:3: colunnrgap:0.Sin:} 


ine{float:pagetoprieht; width:3g:} 
Css3 是 Css 技 术 的 升级 版 本 ，CSs3 滞 言 开发 是 朝 着 模块 化 发 展 的 。 以 
前 的 规范 作为 一 个 模块 实在 是 太 论 大 而 且 比 较 复 杂 ， 所 以 ， 把 它 分 解 为 一 。 其 中 ，body 部 分 声明 页 面 为 3 栏 ， 栏 间距 为 0 5 英寸; ine 中 和 oat 属 性 
些小 的 模块 ， 更 多 新 的 模块 也 被 加 入 进 幸 - 这 些 梳 块 包括 :信子 模型 指明 图 片 入 动 位 置 为 页 面 的 古 上 角 。 而 帘 度 为 3 个 栏 寅 。 只 需 这 样 两 行 
列 束 模块 、 超 链接 方式 、 语 言 模块 、 青 景 和 边框 、 文 字 特效 、 多 栏 布 Css ， 就 可 以 实现 这 个 复杂 布局 - 
局 等 - 


11-28 ”两 列 布局 的 版 式 页 面 


11.7 ”实践 疑难 解答 


11.7.1 input 宽度 比 textarea 少 2px 的 问题 


input 宽度 比 textarea 少 2px 的 问题 
用 网 络 课堂 http://bbs.itzcn.com/thread-19736-1-1.html 


【问题 描述 】: 前 几 天 遇 到 了 一 个 这 样 的 问题 : 在 表单 中 的 input 和 textarea 元 素 设置 了 
同样 的 宽度 ， 可 是 显示 结果 却 是 input 元 素 的 宽度 比 textarea 少 ， 这 是 怎么 回 事 呢 ? 应 该 如 
何 解决 ? 

【解决 办 法 】 这 种 问题 的 解决 方案 其 实 有 很 多 种 ， 例 如 ， 可 以 设置 input 的 宽度 比 
textarea 的 宽度 多 2px 或 者 lpx。 但 是 最 合理 的 一 种 解决 办 法 就 是 为 textarea 表单 元 素 设置 
box-sizing 属性 。 

对 于 这 个 问题 , 首先 来 分 析 一 下 为 什么 input 的 宽度 会 比 textarea 的 宽度 少 呢 ? 这 是 因 
为 textarea 默认 是 有 边框 的 ， 和 input 是 不 一 样 的 。 在 CSS 中 同时 为 两 者 设置 1px 的 边框 ， 
相当 于 textarea 的 宽度 增加 了 2px， 这 就 是 产生 这 种 问题 的 原因 。 因 此 ， 可 以 在 页 面 中 为 
textarea 设置 CSS 3 样式 ， 这 样 就 能 解决 该 问题 了 。 如 下 面 的 代码 所 示 : 


11.7.2 ”设计 一 个 两 行 两 列 的 布局 版 式 页 面 


Eb 设计 一 个 两 行 两 列 的 布局 版 式 页 面 
全 网 络 课堂 ， http:/Wbbs.itzcn.conythread-19737-1-1.html 


【问题 描述 】: 我 现在 需要 设计 一 个 两 行 两 列 的 布局 版 式 页 面 ， 其 中 第 一 行 用 于 显示 标 
题 , 需要 跨 两 列 来 展现 ; 第 二 行 显示 正文 。 这 样 的 页 面 除 了 使 用 table 表格 来 控制 布局 之 外 ， 
还 可 以 如 何 实现 ? 

【解决 办 法 】: 使 用 CSS 3 中 的 column-width、column-count、column-gap、column-rule 
属性 即 可 实现 想 要 的 页 面 效 果 。 页 面 的 整体 布局 使 用 div 来 控制 ， 在 最 外 层 的 div 层 中 包 
含 两 个 div 元 素 ， 其 中 第 一 个 div 元 素 用 于 展现 文章 的 标题 ， 宽 度 为 两 列 的 宽度 ， 第 二 个 
div 元 素 用 于 展现 文章 的 正文 内 容 ， 使 用 CSS 3 中 的 多 列 布局 来 控制 。 具 体 的 代码 如 下 


运行 效果 如 图 11-29 所 示 。 


癌 sawmarrale 必 性 
下 SC Ofile:///F:/project/11/0000.htal 


column-rule 
本 Css 项 目 除了 基础 知识 ( 不 包括 transform 与 transition》 。， 作 ， 欢 迎 广大 wet 前 端 领域 的 同仁 们 积极 参与 CSS3 相 关 知识 的 
独立 边 得 制 。 聚合 。 


职 自 腾讯 TSD Webtean ,其 余 均 是 我 ( 张 使 坦 ) 


图 11-29 两 行 两 列 的 表格 布局 页 面 


«| 2 ， 


CSS 3 中 增加 了 许多 革命 性 的 创新 功能 ， 如 添加 了 文本 阴影 、 圆 角 边 框 、 多 列 布局 和 
盒 布 局 等 相关 的 静态 样式 属性 。 除 此 之 外 ，CSS 3 中 还 添加 了 实现 动态 变化 的 样式 属性 ， 
使 用 这 些 属性 可 以 实现 元 素 过 渡 、 平移 、 移动 以 及 缩放 等 效果 ， 本章 将 详细 介绍 这 些 属性 。 

通过 本 章 的 学 习 ， 读 者 可 以 对 CSS 3 中 的 过 渡 、 转 换 和 动画 有 所 了 解 ， 并 且 能 够 熟练 
地 使 用 相关 属性 实现 过 渡 、 移 动 、 旋 转 、 倾 斜 和 缩放 等 特效 。 


本 章 学 习 要 点 : 
> 掌握 过 渡 、 平 移 和 动画 效果 实现 的 浏览 器 支持 情况 


VvvyvyY 


> 


12.1 


掌握 相关 属性 实现 过 渡 效 果 的 方法 

掌握 transition 属性 的 使 用 方法 

掌握 如 何 使 用 transform 属性 实现 平移 、 缩 放 、 倾 斜 和 旋转 操作 
掌握 如 何 实现 更 改元 素 原 点 坐标 的 效果 

熟悉 设置 动画 关键 帧 的 语法 

掌握 与 动画 相关 的 属性 及 使 用 方法 


过 渡 可 以 动态 改变 颜色 的 值 ， 以 动画 的 形式 从 一 种 颜色 过 渡 到 另外 一 种 颜色 。 一 般 情 
况 下 ， 如 果 要 改变 一 个 样式 属性 的 值 ， 变 化 就 会 立即 发 生 且 中 间 没 有 过 渡 状 态 ， 但 是 CSS 
3 中 提供 的 相关 属性 解决 了 这 个 问题 。 


12.1.1 浏览 器 支持 情况 


CSS 3 中 与 过 渡 相 关 的 属性 有 多 个 ， 如 transition-duration 、transition-property 、 
transition-delay 和 transition-timing 等 。 目 前 所 有 主流 的 浏览 器 都 不 提供 对 这 些 属性 的 支持 ， 
但 是 可 以 通过 扩展 属性 ( 即 添加 前 级 ) 来 实现 。 具 体 说 明 如 下 所 示 : 


口 


口 
口 
口 


Chrome 和 Safari 浏览 器 可 以 通过 添加 “-webkit-” 前 组 来 支持 。 
Opera 浏览 器 可 以 通过 添加 “-o-” 前 组 来 支持 。 

Firefox 浏览 器 可 以 通过 添加 “-moz-” 前 级 来 支持 。 

Intermet Explorer 浏览 器 可 以 通过 添加 “-ms-” 前 级 来 支持 。 


12.1.2 transition-duration 属性 


transition-duration 属性 用 于 指定 过 渡 经 过 的 时 间 ， 即 指定 从 旧 属 性 换 到 新 属性 需要 多 
长 时 间 才 能 完成 。 如 果 将 该 属性 的 值 指定 为 非 负数 或 不 设置 ， 则 会 被 视 为 0。 该 属性 的 单 
位 是 秒 〈s) 或 者 毫秒 (ms)。 

transition-duration 属性 的 语法 非常 简单 ， 只 需要 在 该 属性 后 设置 过 渡 动 画 所 需要 的 时 
间 即 可 。 其 语法 形式 如 下 所 示 : 


下 面 的 示例 代码 演示 了 当 鼠 标 移动 到 图 片上 时 ， 在 3 秒 之 内 从 当前 图 片 过 渡 到 完整 图 
片 并 且 为 图 片 的 边框 添加 样式 的 过 程 。 具 体 代 码 如 下 所 示 : 


transition-duration 属性 指定 的 时 间 也 将 作用 于 “逆向 ”过 渡 ， 即 从 最 终 效果 返 
回 到 原始 效果 所 需要 的 时 间 。 另 外 如 果 要 在 JavaScript 中 对 某 个 对 象 添加 该 属 
性 ， 需 要 根据 浏览 器 是 否 支 持 来 添加 代码 ， 以 Google 浏览 器 为 例 ， 脚 本 代码 
为 object style.WebkitTransitionDuration=“3s”。 其 中 object 为 对 象 名 称 ，Webkit 
为 浏览 器 支持 该 属性 时 添加 的 前 级 名 。 


12.1.3 ”transition-property 属性 


transition-property 指定 要 进行 过 渡 的 CSS 样式 的 属性 名 称 , 如 果 要 指定 多 个 属性 名 称 ， 
则 需要 使 用 逗号 分 隔 。 该 属性 的 语法 形式 如 下 所 示 : 


上 述 语法 中 可 以 将 transition-propery 属性 的 值 设 置 为 3 个 , 它们 的 具体 说 明 如 下 所 示 。 

口 none 不 对 任何 属性 进行 过 渡 。 

口 al 对 所 有 的 属性 进行 过 渡 。 

口 property 定义 进行 过 渡 的 属性 名 称 。 

例如 ， 下 面 的 示例 代码 指定 当 鼠 标 移 到 img 元 素 上 时 对 背景 色 使 用 过 渡 效 果 。 具 体 代 
码 如 下 所 示 : 


如 果 要 在 脚本 中 对 某 个 对 象 添加 该 属性 ，Google 浏览 器 中 JavaScript 的 代码 为 
objectstyle.WebkitTransitionProperty=“width,height?。 其 中 object 为 对 象 名 称 ， 
width 和 height 表示 属性 名 称 。 


12.1.4 transition-delay 属性 


transition-delay 属性 指定 过 渡 延 迟 的 时 间 ， 单 位 为 秒 〈s) 或 者 毫秒 (ms)。 该 属性 的 
值 可 以 为 正 数 、 负 数 或 零 ， 如 果 为 负数 表示 过 滤 的 动作 会 从 该 时 间 点 开始 显示 ， 之 前 的 所 
有 动作 都 会 被 截断 。 

transition-delay 属性 的 使 用 方法 也 非常 简单 ， 直 接 在 该 属性 后 面 设置 延 时 时 间 即 可 。 
语法 形式 如 下 所 示 : 


例如 ， 下 面 的 示例 代码 指定 当 和 鼠标 移动 到 img 元 素 上 时 对 图 片 宽度 和 高 度 实现 过 渡 效 
果 。 但 是 该 动画 效果 不 会 立即 执行 , 而 是 等 待 5 秒 后 再 缓慢 地 从 当前 图 片 过 渡 到 整 张 图 片 。 
有 具体 代码 如 下 所 示 : 


另外 ， 如 果 要 在 JavaScript 代码 中 设置 该 属性 ， 其 具体 代码 是 : 


12.1.5 ”transition-timing-function 属性 


transition-timing-function 属性 是 整个 过 渡 效 果 的 核心 属性 ， 它 指定 过 渡 过 程 中 时 间 的 
计算 方式 ， 从 而 实现 加 速 或 者 减速 效果 。 该 属性 的 语法 形式 如 下 所 示 : 


上 述 语法 中 指定 transition-timing-function 属性 的 值 为 6 个 ,其 具体 说 明 如 表 12-1 所 示 。 


表 12-1 transition-timing-function 属性 的 值 


linear 默认 值 ， 指 定 切换 效果 以 相同 速度 从 开始 到 结束 。 等 同 于 
cubic-bezier(0.0.0.0.1.0.1.0) 

ease 指定 一 个 缓慢 的 开始 ， 然 后 加 快 ， 最 后 慢 慢 结束 。 等 同 于 
cubic-bezier(0.25.0.1.0.25.1.0) 

ease-in 指定 一 个 缓慢 的 开始 ， 然 后 逐渐 加 速 〈 淡 入 效果 )。 等 同 于 
cubic-bezier(0.42.0.1.0.1.0) 

ease-out 指定 一 个 缓慢 的 结束 (淡出 效果 )。 等 同 于 cubic-bezier(0,0,0.58,1.0) 

ease-in-out 指定 加 速 后 再 减速 。 等 同 于 cubic-bezier(0.42,0,0.58,1) 

cubic-bezier(x1,y1,x2,y2) 定义 用 于 加 速 或 者 减速 的 贝 塞 尔 曲线 的 形状 , 它们 的 值 在 0~1 之 间 


例如 ， 为 了 使 实现 的 过 渡 效 果 更 加 富有 立体 感 ， 可 以 使 用 transition-timing-function 属 


性 指定 过 渡 效 果 。 在 上 一 节 的 基础 上 添加 如 下 代码 : 


12.1.6 transition 属性 


transition-duration 、transition-propery、transition-delay 和 transition-timing-function 属性 
都 可 以 指定 元 素 的 过 渡 效 果 ， 但 是 如 果 为 每 个 元 素 定义 完整 的 过 渡 效 果 时 需要 添加 每 个 属 
性 ， 并 且 需 要 为 这 些 属性 添加 前 级。 这 样 非常 麻烦 ， 如 代码 元 长 和 不 方便 修改 等 ， 那 么 有 
没有 一 种 简单 的 方法 呢 ? 答案 是 肯定 的 。CSS 3 还 提供 了 另外 一 种 属性 : transition。 

transition 属性 是 一 个 速记 属性 ， 通 过 它 可 以 设置 上 述 属 性 的 值 ， 各 个 属性 之 间 使 用 空 
格 分 隔 。 其 语法 形式 如 下 所 示 : 


例如 ， 使 用 多 个 属性 为 某 个 div 元 素 实 现 过 渡 效 果 的 代码 如 下 所 示 : 


但 是 直接 使 用 transition 属性 代码 就 简单 很 多 ， 如 下 所 示 : 


使 用 过 渡 的 相关 属性 可 以 实现 多 个 过 渡 的 效果 ， 例 如 ， 元 素 在 更 改 旋转 的 时 候 也 可 以 
更 改 颜 色 。 使 用 多 个 属性 定义 的 代码 如 下 所 示 : 


上 述 代码 表示 在 3 秒 内 对 旋转 属性 应 用 到 ease-in 的 过 渡 , 在 2 秒 内 对 颜色 属性 应 用 到 


ease-out 的 过 渡 。 
如 果 通 过 指定 transition 属性 实现 多 个 过 渡 效 果 ， 需 要 为 每 个 过 渡 集 中 指定 所 有 值 ， 并 
且 使 用 逗号 分 隔 每 个 过 渡 。 其 具体 代码 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


12.1.7 ”多 个 颜色 过 渡 


前 面 已 经 详细 介绍 了 过 渡 的 相关 属性 , 本 节 使 用 transition 属性 实现 多 个 颜色 渐变 过 渡 
的 效果 。 

【实践 案例 12-1】 

实现 本 案例 效果 的 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 是 
所 示 : 


系 加 两 个 div 元 素 。 其 具体 代码 如 下 


<div id="div"> 
<div class="liv"></div> 
</div> 


(2) 为 页 面 中 的 div 元 素 添 加 相关 样式 ， 具 体 样式 代码 如 下 所 示 : 


#div .liv 


{ 
width:150px; /* 指 定 元 素 宽度 */ 
height:150px; /* 指 定 元 素 高 度 */ 
margin-left:50px; 
margin-top:50px; 
background: #ff0000; /* 背 景 颜色 */ 
transition: background-color 3s 0.5s linear; 
-moz-transition: background-color 3s 0.5s linear;/*Firefox 浏览 器 */ 
-webkit-transition: background-color 5s 0.5s linear; 
/*Google 或 Safari 浏览 器 */ 
-o-transition: background-color 3s 0.5s linear; /*Opera 浏览 器 */ 
和 
#div .liv:hover /*# 鼠 标 基 浮 时 的 样式 */ 
{ 
background: #0006ff; 


上 述 样 式 代码 中 通过 background 属性 指定 div 元 素 的 背景 颜 
性 设置 鼠标 


i 色 , 然后 通过 transition 属 
延迟 0.5 秒 ， 然 后 在 3 秒 内 实现 颜色 从 红色 匀速 过 渡 到 蓝 色 的 效果 。 
引 图 形 时 的 过 渡 效 果 如 图 12-1 所 示 。 


Us 


本 实例 也 可 以 通过 分 别 设置 过 渡 属 性 实现 颜色 的 渐变 效果 ， 感 兴趣 的 读者 
可 以 亲自 动手 试 一 试 。 


12.2 变形 


CSS 3 中 可 以 利用 transform 功能 来 实现 文字 或 图 像 的 旋转 、 缩 放 、 倾 斜 和 平移 的 变形 
处 理 ， 也 可 以 更 改变 形 的 坐标 原点 。 本 节 将 详细 介绍 这 些 内 容 。 


12.2.1 变形 的 相关 属性 


CSS 3 中 提供 了 3 种 与 变形 相关 的 属性 ， 它 们 的 具体 说 明 如 下 所 示 。 

口 transform-style 

transform-style 属性 指定 嵌 套 元 素 是 如 何在 三 维 空间 中 呈现 的 ,如 果 将 该 值 指定 为 flat， 
表示 不 保留 其 三 维 转换 效果 ; 将 该 值 指定 为 preserve-3d, 表示 子 元 素 保留 其 三 维 转换 效果 。 
其 语法 形式 如 下 所 示 : 


口 transform-origin 

transform-origin 属性 允许 用 户 更 改 转 换 元 素 的 位 置 ， 如 果实 现 2D 效果 则 可 以 改变 元 
素 的 X 轴 和 立轴 ， 实 现 3D 效果 还 可 以 改变 元 素 的 Z 轴 。 但 是 该 属性 必须 与 transform 属 
性 结合 使 用 ， 不 能 单独 使 用 。 

transform-origin 属性 的 语法 形式 如 下 所 示 : 


上 述 代 码 中 transform-origin 属性 有 3 个 参数 ， 这 些 参 数 的 具体 说 明 如 下 所 示 。 

口 x-axis 定义 视图 设置 在 义 轴 ， 可 能 的 值 包括 left、center、right、length 和 %。 

口 y-axis 定义 视图 设置 在 Y 轴 ， 可 能 的 值 包括 top、center、bottom、length 和 %。 

口 z-axis 定义 视图 设置 在 Z 轴 ， 常 用 的 值 有 length。 

口 transform 

transform 属性 用 来 指定 转换 操作 ， 该 属性 可 以 对 元 素 进行 旋转 、 平 移 、 缩 放 和 移动 等 
操作 。 其 语法 形式 如 下 所 示 : 


上 述 语法 中 指定 transform 的 属性 值 是 none 或 者 多 个 函数 中 的 一 种 , 表 12-2 列 出 了 常 
用 的 函数 。 


matrix(n,n,n,n,n.n) 
translate(x,y) 
translateX(x) 
translateY(y) 
scale(x,y) 
ScaleX(X) 
scaleY(y) 
rotate(angle) 
rotateX(angle) 
rotateY (angle) 
Skew(x-angle,y-angle) 
skewX(angle) 
skewY(angle) 


表 12-2 transform-functions 常用 的 函数 


使 用 6 个 值 的 矩阵 实现 缩放 、 旋 转 、 倾 斜 或 其 他 操作 

以 矩阵 中 的 x 和 y 为 参数 移动 元 素 ， 第 二 个 参数 是 可 选 的 ， 默 认 值 为 0 
只 沿 着 久 轴 移动 元 素 

只 沿 着 立轴 移动 元 素 

以 矩阵 中 的 x 和 y 为 参数 缩放 ， 第 二 个 参数 是 可 选 的 ， 默 认 值 等 于 第 一 个 
为 XX 轴 的 值 定义 一 个 缩放 转换 ， 等 同 于 scale(x,1) 

为 立轴 的 值 定 义 一 个 缩放 转换 ， 等 同 于 scale(1,y) 

根据 指定 的 角度 旋转 元 素 

只 沿 着 义 轴 旋转 

只 沿 着 立轴 旋转 

沿 着 XX 轴 和 YY 轴 倾斜 

只 沿 着 义 轴 倾斜 

只 沿 着 Y 轴 倾斜 


如 果 要 在 JavaScript 中 设置 变形 的 相关 属性 ， 直 接 通 过 属性 指定 该 值 即 可 ， 


如 object.style.transformStyle=“flat”( object 表示 对 象 )。 另外， 目前 所 有 
的 浏览 器 都 不 提供 对 该 属性 的 支持 ， 但 是 这 种 支持 可 以 通过 添加 前 级 的 方 
式 实现 。 


12.2.2 平移 


将 transform 属性 的 属性 值 指 定 为 translate0 〇 函数 、translateX() 函 数 或 translateY0 函 数 
都 可 以 实现 平移 的 效果 。translate0 函 数 语 法 形式 如 下 所 示 : 


上 述 语法 中 x-value 指 元 素 在 水 平方 向 上 移动 的 距离 ，y-value 指 元 素 在 垂直 方向 上 移 
动 的 距离 。 图 12-2 给 出 了 平移 的 效果 。 


实 线 代 表 平 移 前 的 图 形 
虚线 代表 平移 后 的 图 形 


图 12-2 平移 效果 图 


【实践 案例 12-2】 

本 案例 通过 将 transfrom 属性 的 值 设 置 为 translate0 函 数 实现 平移 效果 。 其 具体 步骤 如 
下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添 加 img 元 素 和 input 元 素 。 具 体 代码 
如 下 所 示 : 


(2) 单 击 每 个 单 选 按 钮 都 会 触发 onclick 事件 调用 changePosition0 函 数 , 该 函数 通过 传 
入 的 参数 值 设 置 transform 属性 的 值 。 其 具体 代码 如 下 所 示 : 


(3) 运行 本 案例 的 代码 ， 单 击 不 同 的 按钮 进行 测试 ， 
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12-3 平移 效果 


12.2.3 ”缩放 


如 果 将 transform 属性 的 值 设置 为 scale0 函 数 、scaleXO 函 数 或 scaleY0 函 数 可 以 重新 定 
义 元 素 的 宽度 和 高 度 比 例 ， 从 而 实现 元 素 缩 小 或 放大 的 效果 。 以 最 常用 的 scale0 函 数 为 例 ， 
RW) 其 语法 形式 如 下 所 示 : 


上 述 语 法 向 scale0 函 数 中 传 入 的 参数 a 和 ob 可 以 是 正 数 、 负 数 和 小 数 。 如 果 为 正 数 ， 
表示 在 元 素 原来 的 基础 上 放大 元 素 ; 如 果 为 小 数 ， 表 示 在 元 素 原来 的 基础 上 缩小 元 素 ， 如 
果 为 负数 ， 则 表示 将 元 素 翻转 180” 后 再 进行 缩放 。 如 果 省 略 第 二 个 参数 ， 那 么 默认 情况 
下 它 的 值 与 第 一 个 相同 。 图 12-4 显示 了 缩放 的 效果 图 。 


ER, A 1 
实 线 代 表 缩 放 前 的 图 形 
虚线 代表 缩小 和 放大 后 的 图 形 


12-4 缩放 效果 图 


下 面 通过 一 个 简单 的 示例 演示 scale0 函 数 的 使 用 。 

【实践 案例 12-3】 

本 案例 中 实现 相册 列表 的 显示 ， 当 鼠标 移动 到 图 片上 时 实现 图 片 放 大 效果 ， 鼠 标 移出 
后 重新 显示 原来 的 大 小 。 实 现 该 功能 的 主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 世 、 和 imsg 元 素 ， 它 们 实现 元 素 
的 列表 显示 。 主 要 代码 如 下 所 示 : 


(2) 为 页 面 中 的 元 素 添加 相关 样式 ， 当 鼠标 悬浮 时 通过 transform 属性 将 图 片 放 大 2 
倍 ， 通 过 box-shadow 属性 设置 图 片 显示 的 阴影 效果 。 主 要 代码 如 下 所 示 : 


(3) 运行 本 示例 的 代码 进行 测试 ， 最 终 运 行 效果 如 图 12-5 所 示 。 


scale(0 函 数 中 的 值 也 可 以 设置 为 小 数 和 负数 ， 有 兴趣 的 读者 可 以 亲自 动手 
试 一 试 ， 比 较 它们 的 运行 效果 。 


12.2.4 ”倾斜 


如 果 将 transform 属性 的 值 设置 为 skew0 函 数 、skewX0 函 数 或 者 skewY0 函 数 可 以 对 
元 素 水 平和 垂直 方向 上 进行 倾斜 。 以 skew0 函 数 为 例 ， 其 语法 形式 如 下 所 示 : 


上 述 语法 中 参数 x-angel 和 y-angle 都 是 一 个 数字 ， 它 们 分 别 表 示 沿 着 水 平和 垂直 方向 
的 倾斜 元 素 ， 如 果 省 略 第 二 个 参数 ， 则 默认 的 值 为 0。 图 12-6 显示 了 该 函数 的 效果 图 。 


实 线 代 表 缩放 前 的 图 形 
虚线 代表 缩放 后 的 图 形 
实心 圆 形 表 示 元 素 的 中 心 点 


图 12-6 skew0 函 数 的 效果 图 
重新 更 改 上 一 节 案 例 的 样式 代码 ， 在 该 样式 代码 中 对 图 片 进行 倾斜 处 理 。 其 主要 样式 
代码 如 下 所 示 : 


上 述 代码 中 skew(30deg,20deg) 表 示 将 元 素 围绕 义 轴 和 YY 轴 倾 斜 20” 和 30”， 重新 运 
行 本 示例 的 代码 进行 测试 ， 最 终 运行 效果 如 图 12-7 所 示 。 
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图 12-7 倾斜 效果 


有 兴趣 的 读者 可 以 将 skewO 函 数 的 值 设置 为 负数 ， 或 直接 使 用 skewX0 函 
数 和 skewY0 进 行 测试 ， 观 察 它们 的 运行 效果 。 


12.2.5 ”旋转 


如 果 将 transform 属性 的 值 设置 为 rotate() 函 数 、rotateX0 函 数 或 rotateY0 函 数 可 以 实现 
元 素 旋转 的 效果 。 这 些 函 数 以 元 素 的 中 心 点 为 原点 ， 围 绕 顺 时 针 或 者 逆 时 针 的 方向 旋转 指 
定 的 角度 。rotate0 函 数 的 语法 形式 如 下 所 示 : 


上 述 语法 中 参数 angle 表示 以 deg 结束 的 旋转 角度 。 旋 转 是 以 顺 时 针 方 向 进行 的 ， 如 
果 要 实现 逆 时 针 旋转 图 形 的 效果 直接 将 参数 angle 的 值 设 定 为 负数 就 可 以 了 。 图 12-8 为 旋 
转 的 效果 图 。 


Ce > 
a 
angel 为 正 数 ange| 为 负数 
实 线 代表 缩 放 前 的 图 形 
虚线 代表 缩放 后 的 图 形 
图 12-8 ”旋转 的 效果 图 
【实践 案例 12-4】 


本 案例 通过 向 rotateO) 函 数 传递 参数 实现 文字 的 旋转 的 效果 ， 并 且 通 过 设置 transition 
属性 实现 颜色 过 渡 效 果 。 其 具体 步骤 如 下 所 示 : 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 ul、L 元 素 ， 它 们 显示 导航 链接 列 
表 。 页 面 主要 代码 如 下 所 示 : 


(2) 为 页 面 中 的 元 素 添加 相应 的 样式 代码 ， 当 鼠标 悬浮 到 导航 文字 时 设置 transition 属 
性 ， 指 定 延 迟 0.5 后 再 在 2 秒 内 过 渡 到 蓝 色 ，transform 属性 依次 设置 顺 时 针 旋 转 的 角度 为 
20”、 水 平和 垂直 方向 各 平移 5 个 单位 且 字体 放大 1.2 倍 。 主 要 样式 代码 如 下 所 示 : 


(3) 运行 本 示例 的 代码 进行 测试 ， 最 终 运 行 效果 如 图 12-9 所 示 。 
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12-9 ”旋转 的 运行 效果 


12.2.6 更改 变形 的 原点 坐标 


前 面 几 节 已 经 详细 介绍 过 如 何 通 过 transform 属性 实现 元 素 的 平移 、 缩放 、 倾斜 以 及 旋 
转 效果 ， 但 是 在 进行 这 些 变形 操作 时 都 是 以 元 素 的 中 心 点 为 基准 点 进行 的 。 如 何 要 更 改元 
素 变形 时 的 操作 原点 可 以 使 用 12.2.1 节 介绍 过 的 transform-origin 属性 。 

在 对 称 图 形 中 进行 变形 操作 时 使 用 该 属性 特别 有 用 ， 例 如 对 一 个 圆 形 进行 旋转 ， 通 过 
transform-origin 属性 更 改 旋转 的 原点 。 图 12-10 显示 了 更 改变 形 原点 的 效果 图 。 
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12-10 更 改 原点 坐标 的 效果 图 


下 面 以 简单 的 示例 演示 将 transform-origin 的 属性 设置 为 不 同 的 值 时 显示 的 图 片 效 果 。 

【实践 案例 12-5】 

本 案例 首先 添加 img 元 素 ， 然 后 通过 设置 transform-origin 属性 的 值 实现 不 同 的 效果 。 
主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页面， 在 页 面 的 合适 位 置 添加 4 个 img 元 素 , 它们 显示 更 改 原点 
坐标 后 的 不 同 图 片 。 具 体 代码 如 下 所 示 : 


(2) 更 改 img 元 素 旋 转 时 的 坐标 原点 ， 添 加 样式 的 主要 代码 如 下 所 示 ; 
inagel im 


(3) 添加 上 述 代码 后 运行 页 面 ， 最 终 运行 效果 如 图 12-11 所 示 。 


12-11 更 改 坐标 原点 的 运行 效果 


12.3 动画 


动画 效果 可 以 让 元 素 从 一 个 样式 逐渐 改变 到 另外 一 个 ，CSS 3 中 除了 支持 过 渡 和 变形 
外 ， 也 可 以 通过 设置 animation 属性 实现 比较 复杂 的 动画 效果 。 本 节 将 详细 介绍 动画 的 相 
关 知识 ， 包 括 animation 属性 、 该 属性 的 值 及 @keyframes 等 内 容 。 


12.3.1 关键 帧 


创建 动画 是 通过 一 个 样式 逐步 改变 设 定 到 另 一 个 而 完成 的 ， 在 创建 动画 的 过 程 中 用 户 
可 以 对 CSS 样式 设 定 多 次 。 但 是 创建 动画 之 前 必须 先 定义 关键 帧 ， 一 个 关键 帧 表示 动画 过 
程 中 的 一 个 状态 , CSS 3 中 通过 @keyframes 来 创建 关键 帧 的 集合 。 它 的 语法 形式 如 下 所 示 : 


上 述 语法 中 各 个 参数 的 说 明 如 下 所 示 。 

口 animationname 该 参数 是 必需 的 ， 它 定义 关键 帧 的 名 称 且 将 会 作为 引用 时 的 唯 
一 标识 。 

口 keyframes-selector 该 参数 是 必需 的 ， 它 指定 当前 关键 帧 应 用 到 整个 动画 过 程 中 
的 位 置 。 该 参数 的 值 可 以 为 fom、to 或 百分比 值 ， 其 中 from 和 0% 的 效果 都 表示 
动画 开始 ，to 和 100% 的 效果 都 表示 动画 结束 。 

口 ess-styles 该 参数 是 必需 的 ， 它 可 以 定义 一 个 或 多 个 合法 的 CSS 样式 属性 。 多 个 
属性 之 间 可 以 使 用 分 号 进行 分 隔 。 


根据 CSS 3 的 语法 标准 ， 目 前 所 有 的 主流 浏览 器 都 不 提供 对 @keyframes 的 支 
持 ， 但 是 可 以 通过 添加 前 组 来 实现 对 其 的 支持 。 如 Firefox 浏览 器 可 以 使 用 
@-moz-keyframes ， Safari 和 Chrome 浏览 器 可 以 使 用 @-webkitkey 
frames 等 。 


例如 , 下面 的 代码 创建 了 一 个 名 称 为 picAppear 的 动画 , 在 该 动画 开始 时 透明 度 为 0.2， 
动画 结束 时 透明 度 为 1。Google 浏览 器 下 的 具体 代码 如 下 所 示 : 


可 以 使 用 from 和 to 来 代替 上 段 代 码 ，Google 浏览 器 下 的 代码 如 下 所 示 : 


开发 人 员 也 可 以 在 一 个 动画 中 添加 多 个 CSS 样式 , 如 下 代码 分 别 指定 了 开始 和 结束 时 
元 素 的 宽度 、 高 度 和 背景 色 等 。 具 体 代码 如 下 所 示 : 


在 动画 中 除了 可 以 定义 多 个 样式 外 ， 也 可 以 定义 多 个 关键 帧 选择 器 。 有 具体 代码 如 下 
所 示 : 


【实践 案例 12-6】 

本 案例 主要 通过 设置 @keyframe 实现 一 个 简单 的 动画 。 其 主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 id 为 donghua 的 div 元 素 。 相 关 代 
码 如 下 所 示 : 


(2) 在 样式 代码 中 添加 @keyframes 属性 ， 接 着 设置 动画 开始 时 、 运 行 过 程 和 结束 时 的 
样式 ， 然 后 在 元 素 中 设置 animation 属性 调用 。 具 体 代码 如 下 所 示 : 
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CSS 3 的 高 级 应 用 


} 

#donghua 

{ 
width:120px; 
height:120px; 
background-image:url (img/1 .gif); 
animation:mymove 5s infinite; 417) 
-webkit-animation:mymove 5s infinite; /*Google 或 Safari 浏览 器 */ 


. 
/* 省 略 其 他 浏览 器 的 设置 代码 */ 
(3) 运行 本 案例 的 代码 并 查看 动画 效果 ， 最 终 运行 效果 如 图 12-12 所 示 。 
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图 12-12 简单 动画 的 运行 效果 


12.3.2 ”动画 属性 


使 用 @keyframe 创建 好 动画 后 并 不 能 实现 动画 的 效果 ， 必 须 通过 动画 的 相关 属性 将 该 
样式 应 用 到 页 面 元 素 上 。CSS 3 中 提供 了 多 个 与 动画 相关 的 属性 ， 它 们 分 别 是 
animation-name 、 animation-duration 、 animation-timing-function 、 animation-delay 、 


animation-iteration-count、animation-direction、animation-fill-mode 和 animation。 


与 变形 、 过 渡 和 @keyframe 的 相关 属性 一 样 ， 目 前 所 有 的 浏览 器 都 不 提供 ， 
对 动 属 性 的 支持 所 以 在 使 用 这 些 属性 时 必须 根据 不 同 的 浏览 器 添加 前 
， 如 Google 或 Safari 浏览 器 可 以 添加 “-webkit-”。 


a 1. animation-name 属性 ”1 


animation-name 属性 用 来 定义 应 用 动画 的 名 箱 称 ， 已 的 值 是 @keyframe 中 绑 定 到 选择 器 
2 尔 。 如 果 值 为 none 则 指定 没有 动画 ， 通 常用 于 覆盖 或 取消 动画 。 该 属性 的 语 
去 形式 如 下 所 示 : 


animation-name:animationname | none; 


如 下 代码 指定 了 图 片 运行 时 动画 效果 ， 并 为 div 应 用 指定 动画 样式 。 有 具体 代码 如 下 


animation-duration 属性 定义 动画 完成 一 个 周期 需要 多 长 时 间 ， 单 位 为 秒 〈s) 或 毫秒 
(ms)。 该 函数 的 语法 形式 如 下 所 示 : 


如 下 代码 指定 5 秒 内 完成 div 元 素 的 动画 效果 : 


animation-timing-function 属性 指定 动画 以 哪 种 方式 完成 执行 效果 ， 该 属性 的 值 与 
transition-timing-function 属性 的 值 相同 ， 具 体 说 明 可 以 参考 12.1.5 节 。 
animation-timing-function 属性 的 语法 形式 如 下 所 示 : 


如 下 代码 指定 div 元 素 在 5 秒 内 匀速 完成 动画 效果 : 


animation-dealy 属性 定义 在 执行 动画 之 前 的 延迟 时 间 ， 单 位 是 秒 〈s) 或 毫秒 (ms)。 
该 属性 值 可 以 是 负 值 ， 如 果 为 负 值 ， 表 示 局 动 进入 动画 的 周期 。 其 语法 形式 如 下 所 示 : 


aninationdelay:tine; 
如 下 代码 指定 元 素 延 时 5 秒 后 青 开始 动画 效果 : 


animation-iteration-count 属性 定义 动画 重复 播放 的 次 数 。 它 的 属性 值 是 一 个 数字 或 
infinite， 如 果 是 数字 ， 则 定义 应 该 播放 多 少 次 动画 ; 如 果 是 infinite， 则 指定 动画 循环 〈 永 
远 ) 播放 。 该 属性 的 语法 形式 如 下 所 示 : 


如 下 示例 代码 指定 重复 播放 div 元 素 的 动画 效果 : 


animation-direction 属性 定义 当前 动画 播放 的 方向 ， 即 动画 播放 完成 后 是 否 逆向 交 蔡 循 
环 。 其 语法 形式 如 下 所 示 : 


animation-direction 属性 的 值 有 两 个 :normal 是 默认 值 ， 表 示 动 画 每 次 都 会 正常 显示 ; 
altemate 表示 交替 逆向 运动 ， 即 动画 正 向 播放 则 奇数 次 迭代 ， 反 向 播放 则 偶数 次 迭代 。 


| 


animation-play-state 属性 指定 动画 是 否 正在 运行 或 已 经 停止 ， 其 语法 形式 如 下 所 示 : 


animation-play-state 属性 的 值 有 两 个 : paused 和 running。 paused 表示 和 暂停 动画 , running 
指定 动画 正常 运行 。 


| 


animation-fill-mode 属性 定义 动画 开始 之 前 或 者 播放 之 后 所 进行 的 操作 , 该 属性 的 语法 
格式 如 下 所 示 : 


上 述 语法 中 animation-fill-mode 属性 的 值 有 4 个 ， 它 们 的 具体 说 明 如 下 所 示 。 


口 none 默认 值 ， 表 示 动 画 按照 定义 的 顺序 执行 ， 且 执行 完成 后 返回 到 初始 的 关 
键 帧 。 

口 backwards 指定 关键 帧 在 动画 开始 前 应 用 样式 。 

口 forwards 指定 关键 帧 在 动画 结束 后 才 应 用 样式 。 

口 both 同时 应 用 forwards 和 backwards 的 效果 。 

如 下 代码 指定 了 该 属性 在 动画 中 的 应 用 : 


与 transition 属性 一 样 ，animation 属性 也 是 一 个 标记 属性 ， 通 过 它 也 可 以 设置 其 他 属 
性 的 值 。 其 语法 形式 如 下 所 示 : 


使 用 animation 属性 时 必须 将 animation-name 和 animation-duration 属性 指定 ， 和 否则 持 
续 的 时 间 为 0， 并且 永远 不 播放 。 
如 下 示例 代码 使 用 多 个 动画 属性 定义 了 元 素 的 完成 实现 效果 : 


上 面 的 代码 可 以 使 用 animation 属性 来 定义 ， 具 体 代码 如 下 所 示 : 


使 用 animation 属性 还 可 以 同时 定义 多 个 动画 效果 ， 每 个 效果 之 间 使 用 逗号 分 隔 。 示 
例 代码 如 下 所 示 : 


12.3.3 图 片 轮换 显示 的 动画 效果 


前 两 节 已 经 详细 介绍 实现 动画 所 需 的 关键 帧 和 动画 属性 ， 本 节 将 它们 结合 起 来 实现 一 
个 简单 的 示例 。 

【实践 案例 12-7】 

用 户 在 访问 网 页 时 会 发 现 ， 许 多 页 面 上 都 实现 了 图 片 不 断 轮换 显示 的 效果 ， 在 HTML 4 
中 需要 借助 第 三 方 内 容 (如 JavaScript 和 JQuery 等 ) 通过 编码 来 实现 ， 但 是 本 节 仅 仅 通过 
设置 元 素 的 相关 属性 样式 就 可 以 实现 图 片 轮换 显示 的 动画 效果 。 其 主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 、img 元 素 和 p 元 素 。 页 
面 主要 相关 代码 如 下 所 示 : 


(2) 首先 为 页 面 中 的 相关 元 素 添加 基本 样式 ， 样 式 代码 如 下 所 示 : 


(3) 通过 @keyframes 分 别 创建 名 称 为 photo 和 text 的 关键 帧 ， 在 该 样式 代码 中 分 别 将 
起 始 位 置 和 结束 位 置 的 top 值 设 置 为 0, 然后 再 分 别 设置 0% 一 90% 的 图 片 和 文字 的 样式 值 。 
主要 代码 如 下 所 示 : 


(4) 通过 animation 属性 为 图 片 和 文字 相关 的 元 素 指定 样式 ， 指 定 完成 后 会 实现 图 片 
轮换 的 动画 效果 。 主 要 代码 如 下 所 示 : 


第 | Os 


CSS 3 的 高 级 应 用 

/* 省 略 其 他 浏览 器 的 设置 */ 
} 
.content-text-main-pt{ /* 为 文字 设置 效果 */ 

position:absolute;right:10px; 

color:#fff; 

-webkit-animation:text 20s infinite; 

/* 省 略 其 他 浏览 器 的 设置 */ 423) 
| 


(5) 运行 本 案例 的 代码 并 查看 效果 ， 轮 换 时 的 效果 如 图 12-13 所 示 。 


Ee 
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图 12-13 图 片 轮换 时 的 运行 效果 


12.4 项目 案例 : 3D 立体 效果 显示 


在 本 节 之 前 已 经 通过 大 量 的 实践 案例 详细 介绍 了 CSS 3 中 与 动态 样式 有 关 的 内 容 ， 包 
括 过 渡 、 变 形 以 及 动画 的 相关 属性 和 操作 等 ， 本 节 将 前 面 儿 节 介绍 的 内 容 结 合 起 来 完成 一 
个 3D 效果 的 立体 图 形 。 

【实例 分 析 】 

本 案例 在 实现 时 主要 利用 CSS 3 中 提供 的 变形 属性 对 页 面 中 的 元 素 进行 平移 、 缩 放 和 
更 改 坐 标 原 点 等 操作 ， 利 用 提供 的 过 渡 属 性 实现 对 元 素颜 色 的 渐变 效果 显示 ， 利 用 动画 的 
animation 属性 实现 立体 显示 的 效果 。 其 具体 步骤 如 下 所 示 。 

(1) 添加 新 的 HIML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 进行 页 面 布局 ， 其 中 包括 
外 围 容器 、 顶 部 内 容 、 左 侧 内 容 和 右 侧 内 容 等 。 页 面 主要 代码 如 下 所 示 : 


<div class="cube"> 
<div class="topFace"> 
<div> 

<h2> 善 忘 是 人 生 的 一 种 佳境 </h2> 
<p>gnbsp; gnbsp; gnbsp; gnbsp; 冷 冷 的 晚 风 ， 轻 轻 地 吹 着 ， 吹 乱 了 满怀 的 
思绪 。 驾 转 的 流年 ， 悄 悄 从 指 颖 中 汐 走 ， 不 留 痕迹 ,无 情 的 岁月 ， 在 脸 上 刻下 道 
道 年 轮 。</p> 
/* 省 略 文章 的 其 他 内 容 */ 


</div> 


(2) 为 页 面 布局 的 元 素 添加 基本 样式 ， 设 置 背景 图 片 、 字 体 大 小 和 位 置 等 内 容 。 其 具 
体 代 码 不 再 详细 列 出 。 


(3) 对 产生 立体 的 外 围 容 器 及 构成 立体 效果 的 页 面 添 加 样式 ， 并 且 添 加 样式 来 定义 元 
素 开始 显示 时 在 不 同 状态 下 的 缩放 效果 。 相 关 代码 如 下 所 示 : 


(4) 对 立体 图 形 的 顶部 页 面 进行 定义 ， 其 中 包含 显示 的 旋转 角度 、 显 示 位 置 、 倾 斜 角 
度 、 缩 放 及 背景 色 等 内 容 。 具 体 代 码 如 下 所 示 : 


(5) 分 别 对 立体 图 形 的 左 侧 页 面 和 右 侧 页 面 定义 样式 ， 注 意 各 个 参数 的 使 用 。 有 具体 样 
式 如 下 所 示 : 


HTML 5 和 CSS 3 编程 从 基础 到 应 用 


-o-transform: skew(0deg, -30deg); 
-ms-transform: skew(0deg, -30deg); 
transform: skew(0deg, -30deg); 
background-color: #ddd; 
left: 200px; 

} 


(6) 鼠标 悬浮 到 立体 图 形 的 位 置 时 会 移动 和 放大 图 形 ， 并 且 使 用 过 渡 的 相关 属性 实现 
背景 色 的 渐变 效果 。 相 关 代码 如 下 所 示 : 
.Cube:hover { 


-webkit-transform-origin:center center; 


-webkit-transform:translate (65px, Spx) scale(1.1,1.1); 
/* 省 略 其 他 浏览 器 样式 代码 */ 


3 


.Cube:hover .rightFace:hover, .cube:hover .leftFace:hover, .cube:hover 
topFace:hover div { 
background-color:Red; 


—webkit-transition-property:background-color; /* 过 渡 的 属性 名 称 */ 
-webkit-transition-duration:5s; /* 过 渡 时 间 */ 
—webkit-transition-timing-function:ease-out; /* 过 渡 方 式 */ 

; 

(7) 如 果 每 个 立体 页 面 的 内 容 过 多 可 以 滑动 鼠标 查看 后 面 的 具体 内 容 。 相 关 样 式 代码 


如 下 所 示 : 


.Cube div.topFace div, .cube div.rightFace, .cube div.leftFace { 
overflow-x: hidden; 
overflow-y: auto; 


(8) 经 过 前 面 的 步骤 ,3D 立体 图 形 效果 基本 完成 。 开发 人 员 也 可 以 对 每 个 页 面 上 的 内 
容 进行 修改 ， 具 体 代码 不 再 显示 。 

(9) 保存 并 运行 页 面 ， 最 终 运 行 效果 如 图 12-14 所 示 。 鼠 标 移动 到 立体 图 形 并 放 至 某 
个 部 分 的 效果 如 图 12-15 所 示 。 


图 12-14 ”案例 初步 运行 时 的 效果 图 12-15 鼠标 移动 时 颜色 的 过 渡 效 果 


12.5 习题 


一 、 填 空 题 

网 是 一 个 标记 属性 ， 使 用 该 属性 可 以 实现 元 素 的 过 渡 效 果 ， 并 且 可 以 代 
替 其 他 属性 。 

2. 开发 人 员 可 以 将 transform 属性 的 值 设 置 为 函数 ， 该 函数 表示 可 以 对 元 
素 进行 水 平和 垂直 倾斜 操作 。 

3. 属性 可 以 更 改变 形 的 原点 坐标 。 

4. CSS 3 中 创建 动画 必须 使 用 属性 定义 关键 帧 集合 。 

5. 如 果 要 设置 动画 的 延迟 时 间 可 以 调用 属性 。 

二 、 选 择 题 

1. 下 面 关 于 过 渡 的 说 法 中 ， 选 项 是 错误 的 。 


A，transition-timing-function 属性 可 以 指定 实现 过 渡 的 方式 ， 默 认 值 为 linear 
B.，transition-delay 属性 定义 过 渡 延 迟 的 时 间 ， 它 的 单位 可 以 是 毫秒 
C. 目前 所 有 的 主流 浏览 器 都 不 支持 transition 属性 , 所 以 这 些 浏览 器 中 不 会 显示 任 
何 效果 
D. 使 用 transition 属性 定义 多 个 属性 效果 时 使 用 空格 分 开 ， 而 不 是 逗号 
2. 如 果 用 户 想 将 当前 的 图 片 移动 到 另 一 个 位 置 ， 选 项。 ”可 以 实现 该 效果 。 
A. transform:translate(20,10) 
B. transform:translateX(20,20) 
C. transform:translateY(10,10) 
D. transform:skew(20) 
3 .transform-origin 属性 可 以 更 改元 素 的 原点 坐标 ， 其 中 该 属性 的 值 不 可 以 是 


. transform-origin:left top 
. transform-origin:30deg bottom 
transform-origin:30% top 
D. transform-origin:right 100% 
4. 下 面 这 段 代码 中 ， 空 白 处 应 该 填写 的 内 容 是 


Amp 


A. form 和 from 
了 .100% 和 newyangshi 
C. newyangshi 和 from 
D. from 和 newyangshi 
5.， transition 属性 的 子 属性 不 包括  。 
A. transition-name 
B. transition-timing-function 
C. transition-delay 
D. transition-propery 
6，animation 属性 的 子 属性 不 包括 。 
animation-name 
. animation-timing-function 
. animation-property 
. animation-direction 


三 、 上 机 练习 


nm 


1. 实现 元 素 的 缩放 和 阴影 效果 


添加 新 的 HTML 页 面 , 在 页 面 的 合适 位 置 添加 元 素 ， 当 鼠标 移动 到 元 素 内 容 时 放大 内 
容 并 且 实 现 边框 的 阴影 效果 。 最 终 效果 如 图 12-16 所 示 。 


图 12-16 上 机 实践 1 的 运行 效果 


2. 实现 3D 立体 效果 
添加 新 的 HTML 页面， 在 页 面 的 合适 位 置 添加 外 围 元 素 、 顶 部 内 容 、 左 侧 内 容 和 右 侧 


内 容 。 根 据 动 画 、 过 渡 和 变形 的 相关 属性 实现 图 形 的 3D 立体 效果 ， 最 终 效果 如 图 12-17 
所 示 。 
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图 12-17 上 机 实践 2 的 运行 效果 


12.6 “实践 疑难 解答 


12.6.1 ”JavaScript 中 如 何 设置 和 获取 CSS 3 中 的 属性 值 


JavaScript 中 如 何 设置 和 获取 CSS 3 中 的 属性 值 
网 络 课堂 : http://bbs.itzcn.com/thread-19740-1-1.html 

【问题 描述 】 以 前 使 用 背景 色 、 宽 度 和 高 度 等 信息 都 可 以 修改 ， 但 是 现在 使 用 CSS 3 
新 属性 后 〈 如 transition-duration、transition-delay 和 transform) 对 象 style 里 面 没有 这 些 属 
性 是 不 是 不 能 进行 设置 了 ， 另 外 如 何 获取 呢 ? 希望 能 够 详细 说 明 一 下 。 

【解决 办 法 】， 其 实 这 些 属性 在 JavaScript 中 的 用 法 也 非常 简单 ， 和 以 前 的 属性 相似 。 
以 Google 浏览 器 中 的 transition-duration 属性 为 例 ， 在 JavaScript 中 需要 将 短线 去 掉 ， 并 且 
采用 pascal 命名 法 将 字母 大 写 。 设 置 该 属性 的 代码 如 下 所 示 : 


retEl 


获取 该 属性 也 非常 简单 ， 代 码 如 下 所 示 : 


We 


其 他 属性 的 用 法 和 该 属性 的 用 法 相似 ,这 里 不 再 详细 介绍 ,另外 , 如果 要 使 用 JavaScript 
脚本 必须 先 学 习 JavaScript 的 语法 知识 ， 了 解 之 后 青 使 用 ， 否 则 使 用 时 会 非常 吃力 。 


12.6.2 ”动画 如 何 循环 播放 


回 辆 。 css 3 中 如 何 让 动画 循环 播放 
[a 外 网 络 课堂 : http:/bbs.itzcn.comy/thread-19741-1-1.html 

【问题 描述 】 大 家 好 ， 我 最 近 在 学 习 动 画 的 时 候 遇 到 一 个 问题 ， 如 果 不 设置 
animation-iteration-count 属性 ， 则 动画 默认 播放 一 次 , 我 现在 已 经 设置 了 该 属性 的 值 并 且 指 
定 了 animation-direction 属性 实现 逆向 交 蔡 循 环 的 效果 。 代 码 如 下 所 示 : 


请 问 上 面 的 代码 有 没有 错误 ， 为 什么 显示 效果 出 不 来 ? 
【解决 办 法 】 animation-direction 属性 的 值 有 2 个 : none 和 alternate。 但 是 你 现在 把 
“alternate” 写 成 了 “altmeate”， 所 以 没有 显示 效果 。 以 后 写 代码 要 认真 ! 


随 着 计算 机 及 网 络 技 术 的 飞速 发 展 ，Intemet 应 用 在 全 球 范围 内 日 益 普 及 ， 当 今 社会 正 
快速 向 信息 化 社会 前 进 ， 信 息 自动 化 的 作用 也 越 来 越 大 ， 从 而 使 用 户 从 繁杂 的 事务 中 解放 
出 来 ， 提 高 了 用 户 的 工作 效率 。 网 上 购物 越 来 越 成 为 用 户 的 首要 选择 ， 最 初 的 鲜花 管理 都 
是 靠 人 力 来 完成 的 ， 但 是 近 几 年 来 随 着 花 店 规模 和 数量 的 增加 ， 许 多 花 店 正在 突破 以 企业 
经 营 模式 为 主 的 传统 格局 ,向 品种 多 标准 化 发 展 。 小 型 店铺 在 业务 上 需要 处 理 大 量 的 信息 ， 
如 添加 商品 、 更 新 商品 数量 和 库存 等 ， 因 此 与 花 店 相关 的 网 站 和 系统 应 运 而 生 。 

本 章 以 鲜花 网 站 为 例 ， 对 鲜花 相关 的 主要 页 面 结构 进行 分 析 ， 详 细 介 绍 如 何 将 HIML 5 
与 CSS 3 结合 起 来 实现 对 页 面 结构 和 样式 的 相关 定义 ， 其 中 包括 鲜花 首页 、 鲜 花 列 表 、 详 
细 、 购 物 车 以 及 用 户 注 册 等 页 面 。 

本 章 学 习 要 点 : 
简单 了 解 制作 鲜花 网 站 的 背景 和 内 容 
掌握 如 何 使 用 HTML 5 的 相关 元 素 设计 页 面 
掌握 常用 的 HIML 5 表单 属性 ， 如 required、placeholder 和 autofocus 等 
掌握 CSS 3 中 常用 的 选择 器 ， 如 nth-child、last-child 和 first-child 等 
掌握 如 何 使 用 border-radius 属性 创建 圆 角 边框 
掌握 如 何 使 用 CSS 3 中 新 增 的 属性 实现 过 渡 和 转换 特效 
掌握 如 何 使 用 sessionStorage 对 象 对 数据 进行 查看 和 删除 操作 
掌握 获取 用 户 当前 地 理 位 置 的 方法 


13.1 鲜花 网 站 简介 
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随 着 人 们 生活 方式 的 不 断 演变 ， 西 方 礼仪 已 经 在 潜移默化 地 影响 着 人 们 的 思想 ， 追 求 
浪漫 、 美 好 生活 的 人 也 越 来 越 多 ， 鲜 花 成 为 了 人 们 的 礼品 。 圣 诞 节 送 花 、 春 节 送 花 以 及 生 
日 嫁 娶 送 花 等 都 成 为 了 人 们 表达 良好 祝愿 和 感情 的 最 佳 选择 ,并且 被 越 来 越 多 的 人 所 接受 。 
鲜花 成 为 了 象征 着 美好 、 吉 祥 的 时 尚 品 。 

网 上 购物 已 经 被 众多 的 网 民 所 接受 ， 随 着 网 民 的 大 幅度 增加 ， 具 有 一 定 消费 水 平 的 网 
民 也 相对 增多 。 近 几 年 来 网 上 鲜花 营销 发 展 迅速 ， 它 促进 了 花卉 生产 的 发 展 ， 加 快 了 科研 
成 果 的 推广 速度 , 改变 了 大 众 对 花卉 消费 的 习惯 和 概念 , 具有 较 大 的 社会 效益 及 经 济 效益 。 

随 着 互联 网 的 进一步 融入 社会 生活 ， 以 网 站 作为 对 外 的 展示 窗口 进行 内 外 信息 交流 已 


经 成 为 大 众 的 迫切 需要 ， 电 子 商务 已 经 成 为 一 种 时 尚 。 它 遵循 一 切 从 消费 者 的 利益 出 发 ， 
为 消费 者 提供 方便 、 快 捷 和 优质 的 文化 服务 ， 直 到 消费 者 满意 为 止 的 原则 ， 这 样 才能 获得 
更 广泛 的 消费 者 人 群 。 电 子 商务 的 主要 优势 在 于 : 

口 价格 和 成 本 低廉 。 

口 ”鲜花 种 类 齐全 。 

口 增值 服务 更 多 更 超 值 。 

口 购买 商品 更 加 便利 。 

本 章 主要 将 HIML 5 技术 与 CSS 3 技术 结合 起 来 实现 一 个 简单 的 鲜花 网 站 的 制作 。 该 
网 站 具备 一 些 简 单 的 功能 ， 如 首页 展示 、 商 品 列表 、 用 户 注册 及 当前 地 理 位 置 查询 等 。 图 
13-1 显示 了 其 主要 内 容 。 


[ 鲜花 网 站 
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图 13-1 鲜花 网 站 的 主要 内 容 


13.2 ”鲜花 首页 模块 


首页 是 整个 网 站 的 脸面 ， 它 是 整个 网 站 中 最 重要 的 组 成 部 分 。 该 模块 主要 包括 项 部 内 
容 、 底 部 内 容 和 中 间 内 容 3 部 分 。 本 节 将 详细 介绍 鲜花 首页 的 知识 。 


13.2.1 ”结构 分 析 


HTML 页 面 是 由 文字 、 图 片 和 动画 等 相关 内 容 组 成 的 ， 将 这 些 内 容 的 相关 元 素 放置 在 
页 面 标签 中 ， 然 后 使 用 相关 的 CSS 样式 进行 设置 可 以 显示 出 美 轮 美 负 的 页 面 。 图 13-2 为 
鲜花 首页 的 最 终 运 行 效果 。 

设计 人 员 可 以 对 鲜花 首页 效果 图 进行 分 析 ， 该 页 面 分 为 上 、 中 、 下 三 个 区 域 ， 其 中 中 
间 区 域 又 包括 左 侧 特色 商品 和 新 品 上 市 及 右 侧 网 站 基本 内 容 两 部 分 。 鲜 花 网 站 首页 的 框架 
结构 如 图 13-3 所 示 。 

针对 首页 的 结构 框架 添加 相关 的 代码 ， 其 主要 代码 如 下 所 示 : 
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图 13-2 鲜花 首页 运行 效果 


header 


left right 


footer 


图 13-3 首页 框架 结构 图 


为 最 外 层 和 中 间 的 div 元 素 添加 样式 代码 ， 具 体内 容 如 下 所 示 : 


#wrap { 
width: 900px; 


13.2.2 ”设计 项 部 区 域 


顶部 区 域内 容 包 括 形象 区 域 、 网 站 标志 和 导航 菜单 3 部 分 ， 将 页 面 的 顶部 区 域内 容 作 
为 一 张 图 片 处 理 简 单方 便 ， 而 导航 链接 可 以 设计 为 一 个 横向 菜单 。 但 是 需要 将 网 站 标志 及 
导航 等 文字 单独 处 理 ， 图 13-4 为 顶部 区 域 的 框架 图 。 


Logo Picture 
Navigation Menu 


图 13-4 ”顶部 区 域 框架 图 


顶部 区 域 结 构 设计 完成 后 在 页 面 添加 相关 代码 。 主 要 步骤 如 下 所 示 。 
(1) 添加 新 的 HTML 页 面 ， 在 页 面 项 部 区 域 显示 网 站 标志 和 导航 信息 。 其 相关 代码 如 


下 所 示 : 


上 述 代码 中 header 元 素 定义 整个 头 部 内 容 ，menu 元 素 定义 整个 头 部 导航 链接 信息 ， 
然后 使 用 忆 和 下 元 素 显 示 导 航 文字 。 

(2) 为 页 面 头 部 区 域 添加 相关 的 样式 代码 ， 主 要 针对 这 些 元 素 的 宽度 、 高 度 、 背 景 图 
片 、 字 体 颜色 及 填充 样式 等 内 容 进行 添加 。 其 主要 代码 如 下 所 示 : 


(3) 当 和 鼠标 移动 到 导航 链接 文字 时 将 文字 颜色 过 渡 为 红色 ， 并 且 将 导航 链接 放大 1.2 
倍 后 再 旋转 20”。 其 相关 代码 如 下 所 示 : 


上 述 代 码 中 transition 属性 指定 元 素 属性 的 过 渡 效 果 ，transform 指定 元 素 的 变换 效果 。 
而 “-webkit-”“-0-” 和 “-moz-” 表 示 浏 览 器 支持 这 些 属性 需要 添加 的 前 级 。 


13.2.3 ”设计 底部 区 域 


从 图 13-2 中 对 底部 区 域 进行 分 析 后 可 以 发 现 该 部 分 内 容 非常 简单 , 它 仅仅 包含 一 些 友 
情 链接 和 显示 辅助 信息 ， 其 框架 结构 图 不 再 显示 。 

(1) 在 页 面 中 添加 底部 区 域 的 相关 代码 ， 使 用 footer 元 素 定义 整个 页 面 的 底部 内 容 。 
具体 内 容 如 下 所 示 : 


(2) 为 底部 内 容 的 元 素 添加 样式 ,包括 高 度 、 填 充 样 式 、 显 示 位 置 和 字体 颜色 等 内 容 。 
主要 样式 代码 如 下 所 示 : 
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制作 鲜花 网 站 页 面 


padding: 10px 10px 0 0; 
} 
:footer a { 
text-decoration: none; 
padding: 0 5px 0 Spx; 
Color: #afaeaf; 


) 全 


(3) 顶部 区 域 和 底部 区 域 代码 完成 后 运行 页 面 ， 运 行 效果 如 图 13-5 所 示 。 


我 的 位 置 “ ”联系 我 们 
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图 13-5 页面 运行 效果 


13.2.4 设计 中 间 区 域 


中 间 区 域 是 网 站 首页 最 重要 的 一 部 分 ， 从 图 13-2 中 可 以 看 到 该 部 分 包括 两 部 分 : 左 侧 
商品 信息 和 右 侧 基本 内 容 。 其 框架 结构 如 图 13-6 所 示 。 


Left: GoodInfo Tight: BaseInfo 


图 13-6 中间 区 域 框架 图 


(三 左 侧 内 容 ) 
左 侧 内 容 包括 特色 商品 和 新 品 上 市 两 部 分 ， 每 一 部 分 都 采用 article 元 素来 定义 ， 然 后 
section 元 素 指定 每 部 分 的 内 容 。 以 特色 商品 为 例 ， 页 面 主要 代码 如 下 所 示 : 


于 


<div class="left content"> 
<div class="title"><span class="title icon"><img src="images/bullet]l. 
gif" alt="" title="" /></span> 特 色 商品 </div> 


<article> 


为 左 侧 内 容 的 相关 元 素 添加 样式 代码 ， 主 要 代码 如 下 : 


右 侧 内 容 包 含 网 站 的 一 些 基本 信息 ， 如 页 面 背景 颜色 的 改变 、 网 站 信息 和 鲜花 种 类 等 
内 容 。 实 现 该 部 分 的 主要 步骤 如 下 所 示 。 
(1) 添加 div 元 素 显示 整个 右 侧 的 内 容 信息 ， 页 面具 体 代 码 如 下 所 示 : 


(2) 为 显示 整个 右 侧 内 容 的 div 元 素 添加 样式 ， 指 定 该 元 素 的 高 度 、 显 示 位 置 和 填充 
等 属性 。 相 关 代码 如 下 所 示 : 


(3) 在 右 侧 的 合适 位 置 添加 nav 元 素 ， 该 元 素 包含 改变 背景 颜色 的 链接 内 容 。 相 关 代 
码 如 下 所 示 ; 


(4) 当 用 户 单 击 链接 时 触发 onclick 事件 调用 ckColorO) 函 数 ， 该 函数 实现 改变 背景 颜 
色 的 功能 。 其 具体 代码 如 下 所 示 : 


上 述 代码 向 ckColor0 函 数 传 入 两 个 参数 : color 指定 要 更 改 的 颜色 ; id 指定 选中 当前 链 
接 的 ID。 在 该 函数 中 首先 通过 设置 backgroundColor 属性 指定 更 改 当前 的 背景 颜色 ， 然 后 
通过 Transition 属性 指定 在 不 同 浏览 器 下 背景 颜色 的 过 渡 效 果 。 在 for 语句 中 判断 当前 颜色 
是 否 选中 ,如 果 选 中 则 指定 当前 的 样式 为 selected， 和 否则 重新 指定 className 属性 的 值 为 空 
字符 串 。 

(5) selected 样式 指定 选中 当前 链接 时 的 颜色 ,主要 定义 当前 背景 色 、 字 体 颜色 和 边框 
等 属性 。 主 要 代码 如 下 所 示 : 


(6) 在 右 侧 的 合适 位 置 添加 div 元 素 显示 关于 网 站 的 相关 内 容 , 然后 使 用 mark 元 素 高 
亮 显示 字体 为 “鲜花 ”的 文本 。 其 具体 代码 如 下 所 示 : 


(7) 为 上 述 页 面 代码 的 相关 元 素 添 加 样式 ， 主 要 样式 如 下 所 示 : 


(8) 在 合适 位 置 添加 details 元 素 和 summary 元 素 ， 它 们 配合 使 用 定义 标题 信息 。open 
属性 指定 加 载 时 显示 的 详细 内 容 ， 单 击 标题 时 也 会 显示 details 元 素 中 的 内 容 。 主 要 代码 如 
下 所 示 : 


(9) 为 上 述 代码 的 相关 元 素 添加 样式 ， 指 定 它 们 的 宽度 、 位 置 、 字 体 颜 色 和 字体 大 小 
等 属性 。 其 主要 代码 如 下 所 示 : 


上 述 代码 中 使 用 first-child 选择 器 设置 ul 元 素 下 第 一 个 工 元 素 的 样式 ，last-child 设置 
蕊 元 素 下 最 后 一 个 元 素 的 样式 。 

(10) 中 间 部 分 的 主要 代码 已 经 完成 ， 运 行 该 页 面 代码 重新 进行 测试 ， 最 终 效果 如 图 
13-7 所 示 。 


€ 3 CC |D localhost/test/anli/inder. htnl 


长 为 中 国 乃至 世界 最 具 闲 明 力 的 妊 福 旋 . 品 站 站 ， 其 所 千岁 共 排名 
稳 知 同类 网 站 自 一 名 ， 市 场 占有 衬 已 连 法 :年 居中 匡 鲜 花束 进行 
业 第 一 位 。 


图 13-7 中 间 区 域 运行 效果 


由 于 其 他 页 面 也 是 采用 上 、 中 、 下 的 结构 且 顶 部 区 域 、 底 部 区 域 和 右 侧 部 
分 的 内 容 相同 ， 所 以 其 他 页 面 仅仅 介绍 中 间 部 分 左 侧 的 内 容 。 


13.3 ”鲜花 列表 


鲜花 列表 包含 整个 网 站 所 有 种 类 的 鲜花 ， 在 本 页 面 中 用 户 可 以 根据 选择 的 按钮 查看 详 
细 或 简单 列表 。 


13.3.1 运行 效果 


单 击 图 13-2 中 的 【鲜花 】 选 项 可 以 实现 查看 鲜花 列表 的 功能 ， 该 页 面 的 最 终 运 行 效果 
如 图 13-8 所 示 。 
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图 13-8 鲜花 列表 效果 图 


13.3.2 ”设计 列表 内 容 


实现 查看 鲜花 列表 内 容 的 功能 主要 步骤 如 下 所 示 。 
(1) 在 页 面 的 左 侧 位 置 添加 相关 代码 显示 鲜花 列表 内 容 。 其 


E 要 代码 如 下 所 示 : 


<div class="left content"> 


<div class="crumb nav"> <a href="index.html"> 首 页 </a> ggt;&gt; 鲜花 列 
表 </div> 

<div class="title"><span class="title icon"><img src="images/bullet]l. 
gif" /></span> 鲜 花 列 表 </div> 

<div id="container"> 


上 述 代 码 中 分 别 使 用 两 个 input 和 span 元 素 控制 显示 不 同 的 鲜花 列表 ， 然 后 使 用 己 和 
Li 元素 指定 鲜花 列表 内 容 。 


(2) 为 上 述 内 容 的 相关 元 素 添加 样式 ， 指 定 它们 的 宽度 、 透 明度 、 高 度 和 边框 等 属性 。 
主要 样式 代码 如 下 所 示 : 


(3) 显示 鲜花 列表 时 通过 元 素 的 box-shadow 属性 显示 阴影 效果 ， 并 且 使 用 nth-child 
选择 器 指定 偶数 行 元 素 的 样式 , 在 该 样式 中 通过 border-radius 属性 设置 边框 的 圆 角 效果 。 
主要 代码 如 下 所 示 : 


(4) 用 户 单 击 样式 为 view-control-3 按钮 时 可 以 查看 鲜花 的 详细 列表 , 并 且 可 以 指定 它 
们 的 过 渡 效 果 。 相 关 样 式 代码 如 下 所 示 : 


上 述 代码 中 opacity 属性 指定 元 素 的 透明 度 ,transition 属性 则 指定 在 不 同 浏览 器 下 查看 
鲜花 列表 时 的 过 渡 效 果 。 

(5) 用 户 单 击 样式 为 view-control-4 按钮 时 可 以 查看 鲜花 的 简单 列表 ,该 列表 仅仅 显示 
鲜花 的 图 片 信息 ， 并 且 可 以 指定 它们 的 过 渡 效 果 。 相 关 样式 代码 如 下 所 示 : 


(6) 运行 该 页 面 的 相关 代码 查看 效果 ， 查 看 图 片 列表 时 的 效果 如 图 13-9 所 示 。 
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图 13-9 鲜花 列表 页 面 运行 效果 


13.4 ”鲜花 详细 


鲜花 详细 内 容 是 指 用 户 可 以 查看 某 个 商品 的 详细 信息 , 包括 该 商品 的 名 称 、 购买 数量 、 


购买 颜色 以 及 总 价 等 内 容 。 本 节 将 详细 介绍 如 何 设置 鲜花 详细 页 面 的 相关 内 容 。 
13.4.1 运行 效果 


用 户 单 击 某 个 页 面 中 的 商品 图 片 或 标题 链接 时 可 以 跳 转 到 详细 信息 页 面 ， 在 该 页 面 可 
以 查看 某 个 商品 的 详细 信息 。 其 最 终 运行 效果 如 图 13-10 所 示 。 
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13-10 详细 页 面 运行 效果 


13.4.2 ”设计 详细 内 容 


下 面 通过 具体 的 步骤 介绍 如 何 完成 鲜花 详细 页 面 的 设计 效果 。 
(1) 在 页 面 的 合适 位 置 添加 P 元 素 ， 该 元 素 显示 商品 的 基本 信息 ， 包 括 商 品 图 片 、 商 


品名 称 、 价 格 和 材料 等 。 在 该 元 素 中 添加 textarea 元 素来 显示 材料 内 容 ， 将 此 元 素 的 
spellcheck 属性 设置 为 tue， 表 示 支 持 拼音 检查 。 页 面 主要 代码 如 下 所 示 : 


(2) 为 上 述 代码 中 的 元 素 添加 相应 样式 ， 主 要 代码 如 下 所 示 : 


(3) 在 合适 的 位 置 添加 两 个 p 元素 ， 它 们 分 别 显示 商品 的 颜色 列表 和 商品 数量 及 价格 
等 。 页 面相 关 代码 如 下 所 示 : 


(4) 用 户 在 购买 数量 的 文本 框 中 输入 内 容 时 会 触发 onKeyUp 事件 ， 调 用 TotalPriceO 
函数 ， 该 函数 根据 用 户 输入 的 数量 计算 商品 总 价 。 具 体 代码 如 下 所 示 : 


上 述 代码 首先 将 用 户 输入 的 数量 值 作为 参数 传 入 该 函数 中 ， 然 后 在 该 函数 中 调用 
getElementById() 方 法 的 innerHTML 属性 获取 商品 单价 ， 总 价格 计算 完成 后 将 该 值 显示 到 
ID 为 totalPrice 的 span 元 素 中 。 

(5) 在 页 面 中 添加 a 元 素 ， 该 元 素 指向 购物 车 页 面 。 然 后 添加 img 元 素 ， 该 元 素 显 示 
一 个 指定 购物 车 的 按钮 。 页 面相 关 代码 如 下 所 示 : 


(6) 用 户 单 击 上 述 按钮 时 触发 onclick 事件 ， 调 用 AddGoodO 函 数 ， 该 函数 获取 商品 的 
详细 信息 并 且 添加 到 数据 存储 对 象 中 。 有 具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 getSessionStorage() 函 数 获取 sessionStorage 对 象 ， 接 着 使 用 new 创 
建新 的 实体 对 象 。 然 后 调用 ElementById0 方 法 获取 不 同 元 素 的 属性 ， 调 用 sessionStorage 
对 象 的 setItem0 方 法 将 声明 的 objData 对 象 添加 到 该 对 象 中 , 最 后 通过 指定 window 对 象 的 
location 对 象 的 href 属性 值 跳 转 至 购物 车 页 面 。 


(7) getSessionStorage() 函 数 用 来 获取 sessionStorage 对 象 。 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代码 首先 调用 window 对 象 的 sessionStorage 属性 判断 浏览 器 是 否 支 持 该 对 象 。 如 
果 支 持 则 使 用 window.sessionStorage 创建 该 对 象 ， 否 则 返回 undefined。 

(8) 运行 鲜花 详细 页 面 进行 查看 ， 在 页 面 不 同 的 输入 框 中 输入 内 容 进 行 测试 ， 全 部 完 
成 后 单 击 按钮 提交 页 面 至 购物 车 。 最 终 运 行 效果 如 图 13-11 所 示 。 
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13-11 鲜花 详细 页 面 运行 效果 


13.5 ”购物 车 


购物 车 大 家 并 不 陌生 ， 几 乎 所 有 的 电子 商城 网 站 都 包含 购物 车 的 页 面 ， 用 户 在 商品 先 
择 完成 后 可 以 在 该 页 面 上 查看 所 选择 的 商品 信息 ， 并 且 可 以 对 该 页 面 中 的 商品 进行 基本 操 
作 。 本 节 将 简单 介绍 购物 车 页 面 的 具体 实现 。 

13.5.1 ”运行 效果 


在 鲜花 详细 页 面 完成 内 容 输入 后 单 击 【提交 】 按 钮 跳 转 至 购物 车 页 面 ， 该 页 面 的 最 终 
运行 效果 如 图 13-12 所 示 。 
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图 13-12 ”购物 车 页 面 运行 效果 


13.5.2 ”设计 页 面 内容 


设计 显示 购物 车 页 面 内 容 的 具体 步骤 如 下 所 示 : 

(1) 根据 图 13-12 设计 购物 车 页 面 的 详细 内 容 ， 在 
后 在 该 元 素 的 合适 位 置 添加 table 元 素 。 在 table 元 素 中 
中 的 所 有 商品 。 页 面相 关 代 码 如 下 所 示 ; 


<div class="left content"> 


第 ] 3 


页 面 的 合适 位 置 添加 div 元 素 ， 然 
1 添加 tbody 元 素 ， 该 元 素 显 示 购 


<div class="title"><span class="title icon"><img src="images/bulletl. 
gif" alt="" title="" /></span> 我 的 购物 车 </div> 


<div class="feat prod box details"> 
<table class="cart table" style= 
<tbody id="list"></tbody> 
</table> 


"width:100%"> 


<a href="index.html" class="continue">&lt; 继续 购买 </a> <a 
href="#"” class="checkout"> 结 账 &gt;</a> </div> 


<div class="clear"></div> 
</div> 


(2) 页 面 加 载 时 触发 onload 事件 ， 调 用 init0 函 数 ， 
具体 代码 如 下 所 示 : 


function init() 


{ 
Var storage = window.sessionStorage; 
Var totalnum=""; 
Var totalprice=""; 


Var strHTML = "<tbody>"; 


数 显示 购物 车 中 的 所 有 内 容 。 


// 获 取 sessionStorage 对 象 


// 商 品 总 数量 
// 商 品 总 价格 


StrHTMD = "<tr class=\N cart bitleN > 


上 述 代码 首先 调用 window 对 象 的 sessionStorage 属性 获取 sessionStorage 对 象 ， 接 着 
声明 两 个 全 局 变量 totalnum 和 totalprice， 它 们 分 别 表 示 购 物 车 中 商品 的 总 数量 和 总 价格 。 
在 让 语 句 中 调用 sessionStorage 对 象 的 length 属性 获取 购物 车 中 总 的 数据 记录 ， 然 后 使 用 


for 语句 遍历 该 对 象 的 所 有 内 容 。 

在 for 语句 中 首先 调用 sessionStorage 对 象 的 key0 方 法 循环 获取 每 i 个 键 值 对 中 的 key 
值 ， 接 着 调用 该 对 象 的 getItem0) 方 法 获取 key 值 所 对 应 的 value 值 ，JSON 对 象 的 parse() 
方法 表示 返回 一 个 JSON 对 象 data。 然 后 调用 data 对 象 中 的 所 有 属性 (如 proNum、 
proTotalPrice 以 及 proName 等 ) 获 取 详 细 信息 .遍历 记录 完成 后 将 变量 totalnum 和 totalprice 
的 值 分 别 显 示 到 页 面 中 作为 总 数量 和 总 价格 ， 最 后 将 变量 strHTML 中 的 内 容 显示 到 ID 为 
list 的 tbody 元 素 中 。 

(3) 用 户 单 击 每 条 记录 后 面 的 【删除 按钮 时 触发 该 按钮 的 onclick 事件 , 调用 DelPro0 
函数 删除 sessionStorage 对 象 中 的 记录 。 有 具体 代码 如 下 所 示 ; 


上 述 代码 中 首先 将 鲜花 的 名 称 作为 参数 传 入 到 DelPro0) 函 数 中 ， 然 后 在 该 函数 中 调用 
window 对 象 的 sessionStorage 属性 获取 sessionStorage 对 象 。 调 用 该 对 象 的 removeItem() 方 
法 删除 购物 车 中 该 商品 的 信息 ， 删 除 完 成 后 重新 调用 initO 函 数 加 载 购物 车 中 的 内 容 。 

(4) 重新 运行 本 页 面 的 代码 ， 单 击 【删除 】 按 钮 进行 测试 ， 购 物 车 中 的 商品 为 空 时 的 
效果 如 图 13-13 所 示 。 
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13-13 ”购物 车 中 商品 为 空 时 的 运行 效果 


13.6 ”我 的 账户 


所 有 的 电子 商城 网 站 都 包含 用 户 登 录 《或 我 的 账户 ) 页面， 在 该 页 面 中 用 户 可 以 根据 
注册 成 功 的 帐号 进行 登录 ， 登 录 成 功 后 可 以 查看 当前 账户 的 详细 信息 、 购 买 信息 并 且 有 网 
上 支付 等 功能 。 

添加 新 的 HTML 页 面 ,在 页 面 的 合适 位 置 添加 form 元 素 , 在 该 元 素 中 添加 input 元 素 
和 div 元 素 等 。 页 面 主要 代码 如 下 所 示 : 


为 上 述 代 码 中 的 相关 元 素 添加 样式 代码 ， 主 要 样式 如 下 所 示 : 


运行 我 的 账户 页 面 进行 查看 ， 最 终 运 行 效 果 如 图 13-14 所 示 。 
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图 13-14 我 的 账户 页 面 运 行 效果 


13.7 用 户 注 册 


除了 我 的 账户 页 面 外 ， 用 户 注册 页 面 也 是 商城 网 站 中 必 不 可 少 的 一 部 分 。 本 节 将 介绍 
如 何 使 用 HTML 5 中 的 表单 类 型 和 表单 属性 完成 用 户 注册 页 面 的 设计 。 具 体 步骤 如 下 所 示 。 

QD 根据 网 站 的 需要 分 析 用 户 注册 页 面 需要 哪些 内 容 ， 如 用 户 名 、 用 户 密码 、 邮 箱 、 
个 人 主页 以 及 联系 电话 等 。 在 页 面 的 合适 位 置 添加 p 元 素 、ol 元 素 和 下 元 素 ， 它 们 分 别 用 
来 显示 注册 页 面 的 说 明 信 息 。 相 关 代码 如 下 所 示 : 


(2) 向 页 面 中 添加 form 元 素 ， 该 元 素 包含 用 户 注册 时 的 所 有 基本 信息 。 然 后 在 该 元 素 
中 添加 div 元 素 、label 元 素 和 input 元 素 ， 它 们 用 来 显示 用 户 注册 的 名 字 。 页 面 主要 代码 
如 下 所 示 : 


上 述 代码 中 required 属性 指定 用 户 名 是 必需 的 ; placeholder 属性 显示 一 个 简短 的 提示 ， 
并 且 提 示 用 户 应 该 输入 的 数据 autofocus 属性 指定 页 面 加 载 完成 后 该 元 素 会 自动 获取 所 有 

(3) 在 页 面 中 添加 用 于 输入 用 户 密码 的 输入 框 ， 指 定 输入 框 required 属性 的 值 为 必须 
填写 。 页 面相 关 代码 如 下 所 示 : 


(4) 添加 用 户 出 生日 期 和 邮箱 地 址 的 输入 框 ， 页 面相 关 代 码 如 下 所 示 : 


上 述 代码 中 分 别 指定 输入 框 的 类 型 为 date 和 email, 然后 通过 required 属性 指定 它们 是 
必须 填写 的 。 另 外 在 邮箱 地 址 输入 框 中 通过 placeholder 属性 提示 用 户 输入 的 邮箱 格式 ， 且 
通过 multiple 属性 允许 输入 多 个 邮箱 地 址 。 

(5) 添加 联系 电话 和 个 人 空间 的 输入 框 ， 页 面相 关 代码 如 下 所 示 : 


上 述 代码 中 分 别 指定 输入 框 的 类 型 为 ttl 和 url， 在 联系 电话 的 输入 框 中 分 别 指定 
required 属性 和 placeholder 属性 ， 然 后 通过 pattem 属性 的 值 指定 电话 号 码 的 输入 格式 。 在 
个 人 空间 的 输入 框 中 指定 placeholder 属性 的 值 。 

(6) 添加 公司 名 称 和 联系 地 址 的 输入 框 ， 在 输入 框 中 通过 指定 required 属性 的 值 设置 
它们 是 必须 填写 的 。 页 面相 关 代码 如 下 所 示 : 


(7) 添加 类 型 为 checkbox 和 submit 的 input 元 素 ， 它 们 分 别 表示 是 否 同意 协议 内 容 以 
及 执行 注册 操作 。 页 面相 关 代码 如 下 所 示 : 


(8) 运行 本 页 面 的 代码 并 查看 效果 ， 在 页 面 的 输入 框 中 输入 内 容 后 单 击 【 注 册 】 按 钮 
进行 测试 ， 最 终 运行 效果 如 图 13-15 所 示 。 
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图 13-15 用 户 注册 页 面 运行 效果 


13.8 ”当前 位 置 


鲜花 网 站 除了 包含 首页 、 鲜 花 列表 、 详 细 内 容 、 购 物 车 、 用 户 注册 以 及 我 的 账户 静态 


页 面 外 ， 还 包括 用 户 当前 地 理 位 置信 息 。 当 用 户 单 击 【我 的 位 置 】 链 接 时 就 可 以 查看 目前 
所 处 的 位 置 。 实 现 该 页 面 显示 地 理 位 置 效 果 的 主要 步骤 如 下 所 示 。 

(1) 添加 新 的 HTML 页 面 ， 在 页 面 的 合适 位 置 添加 div 元 素 ， 并 且 指 定 该 元 素 的 宽度 
和 高 度 。 页 面相 关 代码 如 下 所 示 : 


(2) 为 i 为 map 的 div 元 素 添加 相应 的 样式 ,然后 设置 该 元 素 的 宽度 和 高 度 属性 。 其 
有 具体 代码 如 下 所 示 : 


(3) 在 页 面 中 导入 Google Map API 的 脚本 文件 ， 其 具体 代码 如 下 所 示 : 


(4) 页 面 加 载 时 调用 init0 函 数 ， 该 函数 的 具体 代码 如 下 所 示 : 


上 述 代 码 中 首先 调用 window 对 象 的 geolocation 属性 判断 当前 的 浏览 器 是 否 支 持 显 示 
当前 地 理 位 置 的 功能 , 如 果 不 支持 则 弹出 提示 。 如果 支持 则 调用 getCurrentPosition( 方 法 获 
取 用 户 当 前 地 理 位 置 ， 获 取 成 功 时 调用 成 功 时 的 回调 函数 handle_success0， 获 取 失 败 时 调 
用 失败 时 的 回调 函数 handle_error0。maximumAsge 属性 和 timeout 属性 分 别 表示 获取 当前 


位 置 的 缓存 时 间 和 超时 时 间 。 
(5) handle_ successO 函 数 用 于 加 载 显 示 用 户 当 前 的 地 理 位 置信 息 ， 该 函数 中 会 传 入 一 
个 position 对 象 ， 其 代码 非常 重要 。 最 外 部 代码 如 下 所 示 : 


(6) 分 步 介绍 handle_ successO 函 数 中 的 内 容 , 首先 设 定 地 图 参数 。 相 关 代码 如 下 所 示 : 


上 述 代码 中 调用 position 对 象 的 coords 属性 获取 当前 位 置 的 详细 信息 ， 接 着 分 别 通过 
latitude 属性 和 longitude 属性 获取 当前 地 理 位 置 的 纬度 与 经 度 。 然 后 将 它们 作为 参数 传 入 
LatLng() 方 法 ， 该 方法 用 于 指定 Google 地 图 上 的 一 个 坐标 点 ， 并 且 同 时 指定 该 坐标 点 的 横 
坐标 和 纵 坐 标 。 在 变量 myOptions 中 通过 center 属性 将 用 户 当 前 位 置 的 纬度 和 经 度 设 定 为 
页 面 打 开 时 Google 地 图 的 中 心 点 。 

(7) 调用 Map() 方 法 创建 地 图 ， 并 且 将 地 图 显示 到 ID 为 map 的 div 元 素 中 ， 页 面相 关 
代码 如 下 所 示 : 


(8) 调用 Marker0 方 法 创建 一 个 地 图 标记 ， 其 相关 代码 如 下 所 示 : 


(9) 调用 InfoWindow0 方 法 设置 标注 窗口 并 且 制 定 标 注 窗口 中 的 注释 内 容 。 页 面相 关 
代码 如 下 所 示 : 


(10) 调用 open0 方 法 打开 标注 窗口 ， 页 面相 关 代 码 如 下 所 示 : 


(11) handle_errorO 函 数 会 在 用 户 拒绝 或 获取 地 理 位置 失 败 的 情况 下 调用 。 该 函数 的 具 
体内 容 如 下 所 示 : 


上 述 代码 在 handle_errorO 函 数 中 传 入 一 个 参数 error 对 象 ， 然 后 根据 code 属性 的 值 进 
行 判断 并 提示 不 同 的 内 容 。 当 code 属性 的 值 为 0 时 表示 不 知道 的 错误 信息 ; 为 1 时 表示 用 
户 拒绝 了 定位 服务 的 请 求 ;为 2 时 表示 没有 正确 获取 或 获取 不 到 用 户 的 当前 地 理 位 置信 息 ; 
为 3 时 表示 获取 用 户 地 理 位 置 的 操作 过 时 。 

(12) 运行 本 页 面 的 相关 代码 查看 效果 ， 最 终 运 行 效果 如 图 13-16 所 示 。 


a EY) red oreer bu 
因 我 的 购物 车 0 仲 可 18 人 nr-¥000 下 


移 关于 我 们 


长 为 中 国有 至 . 兵 网 站 ， 其 所 对 鲜花 排名 


世界 好 内 影响 力 的 脏 花 礼品 网 站 ， 
各 必 同 类 了 网 名 第 一 各 , 市场 占有 训 己 入 娃 3 年 托 中 国 锋 亿 计 过 行 
位- 


六 特价 商品 你 鲜花 分 类 ” 


图 13-16 当前 位 置 页 面 的 运行 效果 
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第 1 章 HTML 5 入 门 基础 


-、 填 空 是 
(1) UTF-8 (2) W3C (3) autofocus (4) mark (5) article 
17'B (2)D (3)A (4) A (5)B 


第 2 章 HTML 5 的 页 面 属 性 和 元 素 


-、 填 空 题 
(1) html (2) meta (3) spellcheck (4) draggable 
(5) progress (6) command (7) hidden 


(1% C2 记 (3)D (4) B 
(5) A (6) A (7) B 


第 3 章 使 用 HTML 5 设计 表单 


-、 填 空 题 
(1) multiple (2) pattern (37 1 (4) placeholder 
(5) required (6) oninput (7) setCustomValidity() (8) disabled 
二 、 选 择 题 


(1 )A (2)D 3)C (4)B (5)D (6)B CI (8) B 


第 4 章 基于 HTML 5 的 多 媒体 支持 


一 、 填 空 题 

(1) muted (2) autoplay (3) pause (4) playing (5) WebM (6) Wav PCM 
二 、 选 择 题 

CI (2 (3) A (4) B 《5 《6 C 


第 5 章 基于 HTML 5 的 绘图 


一 、 填 空 题 

(1) getContext() (2) font (3) translate() (4) restore0 (5) arc0 
二 、 选 择 题 

(Dp) 《2 (3) A (4) C 33 


第 6 章 基于 HTML 5 的 文件 上 传 


一 、 填 空 题 

(1) name (2) if(typeof FileReader=="undefined") 
(3) readAsText() (4) readAsBinaryString() 

(5) ABORT ERR 

二 、 选 择 题 

1XD (2 (3) A (4) C (SYB 


第 7 章 HTML 5 数据 存储 


一 、 填 空 题 

(1) localStorage (2) JSON (3) sessionStorage (4) clear0 (5) stringify() 
二 、 选 择 题 

(7C (27Y.B 3) BD (4) B 


第 8 章 HTML 5 的 高 级 应 用 


一 、 填 空 题 

(1) getCurrentPosition() (2) postMessage() (3) manifest 

(4) CACHE (5) setData() 

二 、 选 择 题 

C1 D 2 让 (3) C (4) B (SY A (6)B 


第 9 章 CSS 样式 和 CSS 选择 器 


一 、 填 空 题 

(1) first-line (2) not 选择 器 (3) upper-roman 
二 、 选 择 题 

Cle (C2) A (3)A 


第 10 章 背景、 边框 和 渐变 的 相关 属性 


一 、 填 空 题 

(1) background-clip (2) content-box (3) background-break 
(4) border-color (5)9 (6) border-radius 

二 、 选 择 题 

KL (2) A (3).B (4) B (SFC 


第 11 章 盒 模型 、 字 体 与 多 列 布局 


一 、 填 空 题 

(1) 内 容 (2) box-shadow (3) column-width (4) column-span 
二 、 选 择 题 

(7B 27D (3)B (4) C 


第 12 章 CSS 3 的 高 级 应 用 


一 、 填 空 题 

(1) transition (2) skewO (3) transform-origin 
(4) @keyframes (5) animation-delay 

二 、 选 择 题 


(DC (2) A (3)B (4)D (SY A (6) C 


